基于jQuery的自动搜索关键词匹配功能

今天我们来看一个简单的基于jQuery的关键字自动匹配的示例，希望本文能对您有所帮助。

例1

在项目中，有时用户需要选择城市，但太多的城市不太方便用户选择。因此，用户可以通过输入框输入城市的汉字或拼音：

当输入拼音时，结果如下：

实现代码如下所示：

实时查询城市名称或拼音

北京
大连
上海
济南
广州
金华
武汉
南京
深圳
天津
成都
临邑
长春
杭州
宁波
青岛
沈阳
功能searchcity（）{
无功searchcityname = $（# searchcityname ）（。Val）；如果（searchcityname = ={）
$（）；
{人}
$（），每个（函数（）{）
拼音= $（this）。Attr（拼音）；var cityName = $（this）。Attr（cityName ）；如果（拼音索引）！= =
| | cityname.indexof（searchcityname）= 1）{！
美元（这个）；
{人}
美元（这个）；
}
}）；
}
}
$（# searchcityname）。Bind（输入propertychange，函数（）{（））
searchcity（）；
}）；
注：

1，当我想实现输入框中实时值列表的查询时，首先想到的方案是使用ajax，但是要想找到链表的值基本上是固定的，为什么不加载一个，所以后台代码是改变的，所有细节都要加载到这个城市。

2，输入框值的变化需要触发事件。我首先想到的是使用的变化，但事实上，变化是输入框的值和输入框失去焦点，所以我最后用KeyUp。Keyup对电脑没有问题的测试，但在微信端，它不工作，所以Keyup将最终取代（输入绑定propertychange（功能）{ }。

3，当判断城市字符是否包含输入框中的字符时，我使用在Firefox下测试的包含函数。没有问题，但它不在Chrome和微信客户端的工作。最后，包含替换为指标。

例2的jquery.autocomplete插件工具的使用。

1。使用设置

主页是将插件的js代码嵌入到您自己的项目中。

2。使用方法

添加自动完成功能，实现自动匹配提示输入表单。
初始化完成的对象保证DOM对象加载正确，否则在IE用户可能有错误。
$（#查询），Autocomplete（服务/自动.ashx的{ serviceurl： / /页面处理完成的请求：2、请求长度，minchars触发自动 / / /（分隔符：最小，|； * /），分离（一 / /分隔符字符或表达式）要求：400、最大高度的建议清单 / / / /像素，宽度最大高度：300，宽度：9999，在列表deferrequestby z-index / /：0 / /列表的请求，延迟（毫秒），如果你不喜欢当用户输入发送大量的请求。我通常设置的延迟在300毫秒。参数：} {国是附加参数：onselect： /功能，（数据值）{ } / /回调功能，触发如果其中的一个建议是选择，查找：{ 'january '，'february '，'march'list为地方} / /自动完成建议}）；

根据文本表单中的输入信息，关键字提示匹配。

{ / /原始请求建议：{ 'liberia'query：李，'libyan阿拉伯利比亚，'liechtenstein '，'lithuania}，建议数据：{ 'lr ' / /列表，'ly '，这'李'，}参数：键 / /可选用于回调函数建议选项列表；}。
jQuery自动插件支持 /关功能控制开关的作用。
var ac =美元（' #查询）。Autocomplete（{ / * * /参数}）；ac.disable（）；ac.enable（）；ac.setOptons（{在}：1001）；
三.设置表演风格

最后，使用div和CSS来美化性能。

liberialibyan阿拉伯jamahiriyaliechtensteinlithuania.autocomplete-w1背景：URL没有重复底（IMG /阴影。PNG）{权；位置：绝对；顶部：0px；左：0px；保证金：00 6px 6px； / * IE6修复：* _background：无；_margin：1px 000；}，{ border: 1px solid #自动完成999；背景：# FFF；光标：默认；文本对齐：左；最大高度：350px；溢出：汽车；保证金：- 6px 6px 6px - 6px IE6具体； / * * / _height：350px；_margin：0；_overflow-x：隐藏；}。autocomplete.selected {背景：# f0f0f0 }。自动完成；div空格：nowrap；填充：2px { 5px；溢出：隐藏；}。自动完成强{ font-weight:正常颜色：# 3399ff；jQuery自动完成；}
上面共享的两个示例都是关于jQuery自动搜索关键字匹配的，希望能对您有所帮助。