jquery.autocomplete 搜索文字提示

阳光穿透心脏的1/2处 2022-03-31 02:29 247阅读 0赞

function GetJobTitle(obj) {
        $(obj).autocomplete("GetJobTitle.ashx", {
            max: 12,    //列表里的条目数
            minChars: 0,    //自动完成激活之前填入的最小字符
            width: 300,     //提示的宽度，溢出隐藏
            scrollHeight: 300,   //提示的高度，溢出显示滚动条
            matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
            autoFill: false,    //自动填充
            extraParams: { key: function () { return $(obj).val(); }, key1: function () { return $(obj).val(); } },
            parse: function (data) {
                return $.map(eval(data), function (row) {
                    return {
                        data: row,
                        value: row.jobid,
                        result: row.jobTitle
                    }
                }); //对ajax页面传过来的数据进行json转码
            },
            formatItem: function (row, i, max) {
                return row.jobTitle;
            },
            formatMatch: function (row, i, max) {
                return row.jobTitle + row.jobid;
            },
            formatResult: function (row) {
                return row.jobid;
            }
        }).result(function (event, row, formatted) {
            return row.jobid;
        });
    }

public void ProcessRequest (HttpContext context) {
            String key = context.Request["key"];
            String key1 = context.Request["key1"];
            if (context.Request["q"] != null && context.Request["q"] != "")
            {
    
                context.Response.Write(GetLikeJobTitle(context.Request["q"]));
            }
    
    
            context.Response.Charset = "utf-8";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8; 
            context.Response.ContentType = "application/json";
            context.Response.End();
        }
        public String GetLikeJobTitle(String key)
        {
            String strJson = String.Empty;
            System.Data.DataSet ds = new DataSet();
            using (System.Data.SqlClient.SqlConnection con = new SqlConnection(sqlcon))
            {
                System.Text.StringBuilder strWhere = new StringBuilder("select top 10 jobid,jobTitle from job_job where 1=1");
                strWhere.Append(" and  PATINDEX('%").Append(key.Trim()).Append("%',jobTitle)>0");
                SqlDataAdapter sqlda = new SqlDataAdapter(strWhere.ToString(), con);
                sqlda.Fill(ds);
                if (ds.Tables[0].Rows.Count > 0)
                {
                    strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ds.Tables[0]);
                }
            }
    
            return strJson;
        }

<input type="text" value="" οnkeyup="GetJobTitle(this);" style="width:300px;"/>

JS和CSS引用

<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>  
<link href="Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />  
<script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>  
<script src="Scripts/Auto\_SaerchKey.js" type="text/javascript"></script>

[ DEMO][DEMO]

[DEMO]: http://files.cnblogs.com/freexiaoyu/%E5%85%B3%E9%94%AE%E5%AD%97%E6%8F%90%E7%A4%BA.rar

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 2. Typescript - 提示与技巧 - 文字类型

欢迎回来！今天我向您展示文字类型。此功能允许您创建一组关系值。 type Direction = "North" | "South" | "East" |

偏执的太偏执、/ 2024年03月16日 12:28/ 0 赞/ 80 阅读

相关 element Tooltip 文字提示一直居于文字正下方

用法官方的代码和实例 <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" plac

痛定思痛。/ 2022年09月08日 11:49/ 0 赞/ 233 阅读

相关 jq 智能搜索下拉提示

源代码：[https://github.com/leon0204/Int-search][https_github.com_leon0204_Int-search]

川长思鸟来/ 2022年06月17日 00:13/ 0 赞/ 205 阅读

相关简单的文字搜索功能

import java.util.ArrayList; import java.util.Collections; import java.util.H

今天药忘吃喽~/ 2022年06月14日 08:44/ 0 赞/ 237 阅读

相关 Solr Suggest实现搜索智能提示

============== 我的配置 ============ solrconfig.xml \[html\] [view plain][] [copy][

拼搏现实的明天。/ 2022年06月12日 15:12/ 0 赞/ 257 阅读

相关 ajax搜索提示框

jsp <%@ page language="java" import="java.util." pageEncoding="UTF-8"%>

古城微笑少年丶/ 2022年06月12日 08:38/ 0 赞/ 221 阅读

相关 Android开发EditText显示文字提示信息

Android开发EditText提示灰色文字显示，如下图： ![70][] 代码实现： 1.xml文件中设置Ediitext的提示文字 android:hint

港控/mmm°/ 2022年05月17日 11:11/ 0 赞/ 568 阅读

相关 jquery.autocomplete 搜索文字提示

function GetJobTitle(obj) { $(obj).autocomplete("GetJobTitle.ashx", {

阳光穿透心脏的1/2处/ 2022年03月31日 02:29/ 0 赞/ 248 阅读

相关 Others-tootip文字提示

<!--Tooltip 文字提示常用于展示鼠标 hover 时的提示信息。使用content属性来决定hover时的提示信息。由placement属

た入场券/ 2022年03月29日 09:29/ 0 赞/ 288 阅读

相关 input 框去掉下面的提示文字、提示选项

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1. 我的一个输入框总是有提示文字： ![water

红太狼/ 2022年03月26日 05:10/ 0 赞/ 540 阅读