仿百度搜寻自动输入提示功能JQuery Autocomplete

官方网址：http://api.jqueryui.com/autocomplete/

官方案例：http://jqueryui.com/autocomplete/

大概效果如下图

此功能最主要的参数是source，所以放到最前面来写

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到<input>中的真实值

3、string参数

如果是string参数，则是指定一个远程的数据源，然后当<input>中有输入变化，即change事件后，会自动将输入的内容，以GET方式发送到远程数据源，其中输入内容以term参数保存；

例如，参数为http://remoteSource，那么在用户输入abc后，将会发送一个GET请求如http://remoteSource?term=abc

返回的结果必须以json格式，数据格式如上面1、2描述

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);
          }
        });

功能支持：

此自动补全功能，支持<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>

appendTo：

指定匹配菜单中的匹配项，将匹配内容补填到哪个标签；一般都是默认补填到<input>标签中

初始化时，用如下方式设置：

$( ".selector" ).autocomplete({ appendTo: "#someElem" });

// getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
 
 
// setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );

autoFocus:

初始化：

$( ".selector" ).autocomplete({ autoFocus: true });

// getter
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" );
 
 
// setter
$( ".selector" ).autocomplete( "option", "autoFocus", true );

delay

$( ".selector" ).autocomplete({ delay: 500 });

// getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
 
 
// setter
$( ".selector" ).autocomplete( "option", "delay", 500 );

$( ".selector" ).autocomplete({ disabled: true });

// getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
 
 
// setter
$( ".selector" ).autocomplete( "option", "disabled", true );

初始化：

$( ".selector" ).autocomplete({ minLength: 0 });

// getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
 
 
// setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );

position

默认值{ my: "left top", at: "left bottom", collision: "none" }

初始化

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
初始化后

// getter
var position = $( ".selector" ).autocomplete( "option", "position" );
 
 
// setter
$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );