Jquery插件仿百度搜索关键字自动匹配功能

本文实例为大家分享了框架搜索关键字自动匹配功能的实现代码，供大家参考，具体内容如下框架自动完成是一个基于框架实现搜索关键字自动匹配提示的插件，该插件可扩展性强，表现性能优越，方便整合到自己的项目中使用；兼容IE 6.0、FF 2、Safari 2.0、Opera 9.0和Chrome 1.0等主流浏览器。

下面是具体的使用方法：

1、使用设置

首页，要把插件的射流研究…代码嵌入到你自己的项目中去。复制代码代码如下：脚本src=' http : jquery。js ' type=' text/JavaScript '！-MCE :0-/script脚本src=' http : jquery。自动完成。js ' type=' text/JavaScript '！-MCE :1-/脚本

2、使用方法

为要实现自动匹配提示的投入表单添加自动完成功能。

输入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'] //建议选项的可选参数：键列表；用于回调函数。}

框架自动完成插件支持开/关功能，从而控制效果的开关。

复制代码代码如下：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}

4、实例讲解

html标题标题/标题样式类型=' text/CSS ' # TxtKey { width :300 px；}/style link href=' CSS/jquery。自动完成。CSS ' rel='样式表type=' text/CSS '/script src=' http 3360 jquery 1。7 .js ' type=' text/JavaScript '/script src=' http : js/jquery。自动完成。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ var array=[' ASP .张东', '张熙', '张亚飞'];/*自动完成函数(1)获取txtKey中用户输入的值（用户每输入一个字符，都会获取一次) (2)将获取的值和排列集合中的元素进行比较，找出匹配的元素，并显示出来(3)会将用户选择的项添加到txtKey中*//*结果函数：对用户选择的结果进行操作数据。参数表示用户选择的项*/$('#txtKey ').自动完成（数组)。结果（函数（事件，数据){ window。位置。'http://www.baidu.com/s？wd=' data ' RSV _ BP=0ch=TN=Baidu bar=RSV _ SPT=3ie=utf-8rsv _ sug 3=6rsv _ sug=0rsv _ sug 1=3rs v _ sug 4=229输入TT=1458 '；})})))/脚本/头体输入id=' TxtKey ' type=' text '/输入id='按钮1 '类型='按钮'值='百度一下/input id=' Text1 '类型=' Text '/正文/html实现效果如下：

以上就是关于框架自动完成使用方法介绍，通过完整示例为大家展示框架自动完成使用效果，希望对大家的学习有所帮助。