ToFishes系列jQuery插件之jSuggest – 搜索框输入框自动下拉提示内容补全插件

很久前就完成的一款插件,应用于高人网(gaoren.com)自动补全提示功能。

该插件只托管了键盘各种事件,输入框change事件,及ajax请求过程。下拉提示内容如何显示,及数据请求后的格式解析等均可以自己自定义,可以说如何显示,如何安排数据格式,完全由心。算是比较灵活了,当然灵活的代价就是配置项,需要写的比较多了。

还没想好插件的使用帮助,先放出demo和下载。有个bug是opera最新版下,按住方向键,下拉选项不能连续选择。

在输入框内输入内容,可以获取到来自淘宝数据的提示:

点击查看单独Demo和和获取下载,已更新至V2。

ToFishes系列jQuery插件之jSuggest – 搜索框输入框自动下拉提示内容补全插件》有22个想法

  1. 想请教下,你的这个autocomplete控件,能支持解决我的下面这个问题么?http://www.iteye.com/problems/84457

    1. 囧,我也没太明白你问题里的意思。不过,我也说明了,我这个插件并没有封装数据处理功能,而是对外开放,仅仅是对自动提示的事件做了封装,还提供了一些事件回调接口,所以应该可以解决你的问题。

  2. 干嘛不用 input 事件?这样鼠标粘贴不会被检测到。
    @jackyrong: 我前两天才实现了个可以实现你的要求的东西呢,不过还没有独立成插件。

    1. 标准浏览器确实是在用input事件,同时还可以有onpaste,oncut事件(发现标准浏览器没写上,只有对IE做了这个,囧)。IE用了一个jquery event插件,监听keyup,paste,cut事件,实现内容改变的触发。

    2. 能否开源一下呢?因为这个需求不变态呀,你的是能在多个浏览器中运行么?

  3. 请教
    var config = {
    url:’cssor.com/1.php&cn=变量’ ,
    这里可以就变量么??
    谢谢!
    或者能不能像 processData: function(data)一样返回数据???谢谢!

    1. 可以在url中直接带变量。如果你想用函数赋值,你需要使用自执行的匿名函数,并返回String。例如:
      url: (function(){
      // 其他代码
      return ‘string’;
      })(),

  4. 如何自己定义数据源呢?不用淘宝的数据,自己写一些关键词作为匹配项。谢谢,我是新手。

    1. 查询的关键词会通过Ajax请求传递给后端,你后端可以根据关键词匹配结果,然后将结果以JSON格式响应过来。至于JSON的解析,你可以通过调用插件时的processData选项自行配置,所以说,数据源的格式由你自己定,如何解析也是由你定。

  5. 请问怎么定义 wordpress 这个站点的关键字。 我完全看不懂。 能讲解一下吗? 你自己的站怎么不用啊~

  6. 请问如何延迟输入的延迟时间?
    希望在输入时,不是没输入一个字符就发起一次ajax请求,而是稍微有延时才请求一次?谢谢!

    1. 在源码第240行,有个变量changeDelayTime=300, 目的就是用于频繁输入的延迟请求时间,如果你还觉得300ms不够,就改源码增加一下时间。

  7. url: ‘js/test.json’,
    queryName: ‘q’, //url?queryName=value,默认为输入框的name属性
    jsonp: null, //设置此参数名,将开启jsonp功能,否则使用json数据结构

    调用本地JSON文件的数据该怎么做呢?我调本地文件总是失败,出不来效果。

    1. 调用本地JSON文件,不要开启jsonp功能,因为你不需要跨域,去掉queryName和jsonp配置项,保留url和其他配置项再试试。

    2. 好像还不行,希望你的DEMO里能增加一个调用本地json的例子,谢谢了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注