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

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

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

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

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

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

http://cssor.com/tofishes-jquery-plugins-jsuggest-auto-complete.html

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

  1. 2012.08.19 @ 20:08 jackyrong

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

    • 2012.08.20 @ 15:08 ToFishes

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

  2. 2012.08.21 @ 08:08 jackyrong

    如果要在一个文本框输入多个,之间用逗号分隔,这个能连续提示么?

  3. 2012.09.14 @ 14:09 依云

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

    • 2012.09.16 @ 12:09 ToFishes

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

    • 2012.10.10 @ 07:10 jackyrong

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

    • 2012.10.11 @ 14:10 ToFishes

      下载的压缩包里有源码的,你没找到?浏览器包括IE6+,和其他标准浏览器。

  4. 2012.10.09 @ 20:10 Am

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

    • 2012.10.11 @ 12:10 ToFishes

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

    • 2012.10.12 @ 12:10 Am

      明白!谢谢!

  5. 2012.10.28 @ 22:10 XiaoQI Ge

    哇,,,看到仙子了,看起来是群里的,哈哈

  6. 2014.02.18 @ 00:02 Hurui

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

    • 2014.03.18 @ 00:03 ToFishes

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

  7. 2014.03.31 @ 17:03 damao50

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

  8. 2014.04.25 @ 17:04 franklee

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

    • 2014.05.07 @ 12:05 ToFishes

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

  9. 2014.08.22 @ 14:08 追命_

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

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

    • 2014.08.22 @ 16:08 ToFishes

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

    • 2014.08.22 @ 17:08 追命_

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

参与评论

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

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(48)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(31)移动开发(4)自然(22)