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

今天我们来看一个基于jquery的关键词自动匹配的简单例子。希望这篇文章对你有所帮助。示例：在项目中，有时用户需要选择城市，但是城市太多，用户选择起来不方便。因此，用户可以通过输入框输入城市的汉字或拼音缩写。结果如下：

输入拼音后，结果如下：

实现代码如下：

Htmlheadtitle通过名称或拼音缩写/title/head metaharset=' utf-8 '脚本类型=' text/JavaScript ' src=' http : jquery . min . js '/script body input id=' search city name ' style=' width : 100%；'Type='text '占位符=' Chinese/拼音首字母'/ul li拼音=' bj ' city name=' Beijing ' a href='/city branch/12 . html ' Beijing/a/li拼音='dl' cityname='大连' a href='/CityBranch/14.html '大连/a/Li拼音=' sh ' city name=' Shanghai ' a href='/city branch/13 . html ' Shanghai/a/Li拼音='jn' cityname='济南' a李拼音=' wh' cityname='武汉' a href='/cityBranch/19.html '武汉/a/li li拼音='nj' cityname='南京' a href='/cityBranch/20.html '南京/a/li拼音=' SZ' cityname='深圳' a href='/cityBranch/22.html '深圳/a/Li拼音='tj' cityname='天津' a href='/cityBranch/21.html '天津Li拼音=' nb' cityname='宁波' a href='/cityBranch/28.html '宁波/a/li li拼音='qd' cityname='青岛' a href='/cityBranch/29.html '青岛/a/Li li拼音='sy' cityname='沈阳' a href='/cityBranch/33.html '沈阳/a/li/ul脚本函数搜索城市(){ var search city name=$(' # search city name ')。 val()；if (searchCityName=='') { $('ul li ')。show()；} else { $('ul li ')。每个(function() { var拼音=$(this))。attr('拼音')；var cityName=$(this)。attr(' city name ')；if(拼音. indexOf(搜索城市名)！=-1 | | city name . indexof(search city name)！=-1) { $(this)。show()；} else { $(this)。hide()；} });} } $('#searchCityName ')。bind('input propertychange '，function(){ search city()；});/script/body/htmlnotes:

1.当我想实时查询输入框中的列表值时，我想到的第一个方案是使用ajax，但是想了想发现列表值基本都是固定的，为什么不加载一次呢？所以我更改了背景代码，加载了所有城市的详细信息。2.输入框中的值变化需要触发一个事件。我的第一个想法是使用onchange，但实际上onchange意味着输入框的值发生了变化，输入框失去了焦点，所以我最终使用了keyup。Keyup在电脑上测试没有任何问题，但是在微信上没有生效。因此，keyup被最终绑定(' input property change '，function () {})取代。3.在判断城市字符是否包含输入框中的字符时，我使用了contains功能，在Firefox中没有问题，但在chrome和微信客户端中没有生效。最后，用indexOf替换contains。

第二，使用jquery.autocomplete插件实现。1.使用安装主页时，将插件的js代码嵌入到自己的项目中。

script src=' http : jquery . js ' type=' text/JavaScript '！-MCE :0-/script script src=' http : jquery . autocomplete . js ' type=' text/JavaScript '！-mce:1-/script2。使用方法在输入表单中添加AutoComplete功能，实现自动匹配提示。

输入id='query '名称='q' /初始化自动完成对象，确保正确加载数字正射影像图对象，否则工业管理学(工业工程)下的用户可能会出现错误$(“# query”).自动完成({ service URL : ' service/autocomplete。ashx '，//处理自动完成请求的页面minChars: 2，//触发自动完成定界符的最小请求长度： /(,|;)\s*/，//用于分隔请求的分隔符（一个字符或正则表达式)maxHeight: 400，//建议列表的最大高度，以像素为单位宽度： 300,//列表宽度zIndex: 9999，//列表的z索引deliverequestby : 0 0，//请求延迟（毫秒),如果您不希望在用户键入时发送大量请求。我通常将延迟设置为300毫秒参数3360 {国家/地区： '是' }，//附加参数on selection :函数(数据，值){ }，//回调函数，如果选择了其中一个建议选项就会触发，lookup: ['一月','二月','三月'] //本地自动完成建议列表});根据文本表单中的输入信息，进行关键字提示匹配。

{ query:'Li '，//原始请求建议：['利比里亚','阿拉伯利比亚民众国','列支敦士登','立陶宛'],//建议数据列表：['LR '，' LY '，' Li '，' LT'] //可选参数：建议选项的键列表；用于回调函数} jQuery自动完成插件支持开/关功能，从而控制效果的开关var ac=$('#query ').自动完成({/*参数*/});空调。disable()；空调。enable()；空调。settopons({ Zin dex : 1001 })；3、设置表现样式

最后，用差异和钢性铸铁美化表现效果。

div class=' Autocomplete-w1 ' div id=' Autocomplete _ 1240430421731 ' class=' Autocomplete ' style=' width : 299 px；'李强/贝利亚/李强/安阿拉伯利比亚民众国/strong Li/strong echtenstein/div class=' selected ' strong Li/strong thu ania/div/div .自动完成-w1 {背景： URL(img/shadow。png)不重复右下角；位置：绝对；top :0 pxleft :0 pxm argin 33606 px 0 0 6px/* IE6 fix : */_ background : none；_ margin:1px 0 0 0 }。自动完成{ border:1px固体# 999背景： # FFF；cursor : defaulttext-向左对齐：最大高度：350 px飞越：汽车；边距：-6px 6px 6px-6px；/* IE6具体： */_高度：350 px_ margin:0_ overflow-x :隐藏；}.自动完成。选中{背景： # f0f 0；}.自动完成div { padd :2 px 5px white-space :无rap飞越：隐藏；}.自动完成strong { font-weight : normal；color: # 3399FF} jQuery自动完成以上分享的两个例子都是关于jQuery实现搜索关键字自动匹配功能的，希望对大家的学习有所帮助。