下拉框联想词搜索

话不多说,直接上代码

<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>jQuery UI Autocomplete - Default functionality</title>
 <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>

 <script> $(function() { var availableTags = [ "中国", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL¸ß", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Per¸ßl", "PHP", "Python", "Ruby", "Scala", "Sche¸ß" ]; $( "#tags1" ).autocomplete({ source: availableTags }); }); </script>
</head>
<body>
 <div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags1" />

 </div>
</body>
</html>

具体效果如下图
下拉框联想词搜索_第1张图片
为了方便,里面引用的是在线包,如果需要你可以直接下载下来放到页面上。
具体前后台实现数据交互,你只需要从前台传ajax请求,后台传一个数组即可。

可以做相应改造,如果你只想显示三条数据,可以在jquery-ui.js中做如下改造:
找到_response方法,改成如下即可:

_response: function() {
        var that = this,
            index = ++requestIndex;

        return function( content ) {
            var _value=new Array();
            for(var i=0;i<3;i++){
                _value[i]=content[i];
            }
            if ( index === requestIndex ) {
                that.__response( _value );
            }

            that.pending--;
            if ( !that.pending ) {
                that.element.removeClass( "ui-autocomplete-loading" );
            }
        };
    }

你可能感兴趣的:(jquery,jquery,UI,联想)