JQuery UI Autocomplete 使用

PHPABC JQuery 1,842 次浏览 , 没有评论

jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
官方网站:http://jqueryui.com/autocomplete/

官网上的一个完整的简单例子:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        $( "#tags" ).autocomplete({
          source: availableTags
        });
      });
      </script>
    </head>
    <body>
 
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags">
    </div>
 
 
    </body>
    </html>

一 数据源的指定

此功能最主要的参数是source,设置匹配菜单中的数据项,设置方式:

1、string数组参数,格式:[ “Choice1”, “Choice2” ]

    初始化时:
    $( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });
 
 
    初始化后
    // getter
    var source = $( ".selector" ).autocomplete( "option", "source" );
 
 
    // setter
    $( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );


2、object数组参数,格式[ { label: “Choice1”, value: “value1” }, … ]

其中label是在匹配菜单中显示项的值,而value,是选中此匹配项后,append到中的真实值

3、string参数
如果是string参数,则是指定一个远程的数据源,然后当中有输入变化,即change事件后,会自动将输入的内容,以GET方式发送到远程数据源,其中输入内容以term参数保存;
例如,参数为http://remoteSource,那么在用户输入abc后,将会发送一个GET请求如http://remoteSource?term=abc
返回的结果必须以json格式,数据格式如上面1、2描述
然后在服务器端接收,并输出相应结果,注意默认传递的参数名称为term:

    public void ProcessRequest(HttpContext context)
    {
        // 查询的参数名称默认为term
        string query = context.Request.QueryString["term"];
        context.Response.ContentType = "text/javascript";
        //输出字符串数组 或者 JSON 数组
        context.Response.Write("[{\"label\":\"博客园\",\"value\":\"cnblogs\"},{\"label\":\"囧月\",\"value\":\"囧月\"}]");
    }

4、function参数,格式 Function( Object request, Function response( Object data ) )
这种参数最灵活,可以让你以自己的方式向服务器发出查询,并自己解析数据,最后将数据回写到response即可

    $ ( ".selector" ). autocomplete ({
      source: function(request,response){
        //获取用户输入
        var term = request.term;
        //根据自定义方式从服务器获取数据
        ...
        //还可以自己解析数据
        ..
        //最后把数据按照前面1、2描述的格式,放到response中
        response(data);
      }
    });

一个例子:

   var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "火星.com", "囧月.com"];
    $("#email1").autocomplete({
        autoFocus: true,
        source: function(request, response) {
            var term = request.term, //request.term为输入的字符串
                ix = term.indexOf("@"),
                name = term, // 用户名
                host = "", // 域名
                result = []; // 结果
 
            result.push(term);
            // result.push({ label: term, value: term }); // json格式
            if (ix > -1) {
                name = term.slice(0, ix);
                host = term.slice(ix + 1);
            }
            if (name) {
                var findedHosts = (host ? $.grep(hosts, function(value) {
                    return value.indexOf(host) > -1;
                }) : hosts),
                findedResults = $.map(findedHosts, function(value) {
                    return name + "@" + value; //返回字符串格式
                    // return { label: name + " @ " + value, value: name + "@" + value }; // json格式
                });
                result = result.concat($.makeArray(findedResults));
            }
            response(result);//呈现结果
        }
    });

二 功能支持:

此自动补全功能,支持<input><textarea>或者有contenteditable 属性的标签

键盘操作:
1、上下键 可以选择匹配项
2、esc建 可以关闭匹配菜单
3、enter建 可以选择当前选中的匹配项
4、pageup pagedown 可以操作匹配菜单中的滚动条

CSS:
1、ui-autocomplete:匹配菜单中匹配项的css属性
2、ui-autocomplete-input:输入框的属性

依赖:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

三 主要的事件

有一些事件,可用于在一些阶段进行额外的控制:

create(event, ui):Autocomplete创建时,可以在此事件中,对外观进行一些控制
search(event, ui): 在开始请求之前,可以在此事件中返回false来取消请求
open(event, ui):Autocomplete的结果列表弹出时
focus(event, ui):Autocomplete的结果列表任意一项获得焦点时,ui.item为获得焦点的项
select(event, ui):Autocomplete的结果列表任意一项选中时,ui.item为选中的项
close(event, ui):Autocomplete的结果列表关闭时
change(event, ui):当值改变时,ui.item为选中的项

这些事件的ui参数的item属性(如果有的话)默认有label和value属性,不管在source中设置的数据是Array还是JSON数组,如下3种:
[“cnblogs”,”博客园”,”囧月”]
[{label: “博客园”, value: “cnblogs”}, {label: “囧月”, value: “囧月”}]
[{label: “博客园”, value: “cnblogs”, id: “1”}, {label: “囧月”, value: “囧月”, id: “2”}]

假如是第三种的话,还可以得到ui.item.id的值。
这些事件可以通过2种方式来绑定,如下:

    // 在参数中
    $("#autocomp").autocomplete({
        source: availableTags
        , select: function(e, ui) {
          alert(ui.item.value)
        }
    });
 
    // 通过bind来绑定
    $("#autocomp").bind("autocompleteselect", function(e, ui) {
        alert(ui.item.value);
    });

通过bind来绑定的方式使用的事件名称为”autocomplete”+事件名称,如”select”就是”autocompleteselect”。

四 多个值的Autocomplete

一般情况下,输入框的autocomplete仅需要一个值就可以(如:javascript);假如需要多个值(如:javascript,c#,asp.net),则需要绑定一些事件来进行额外处理,具体可以参考 http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go