jquery autocompleter下载 - jquery autocompleter源代码下载

jquery autocompleter

其他源码

1.0.0

下载

jQuery 自动完成器插件

演示

此处：Crayola 颜色示例。

用法

安装

节点管理：

npm install --save jquery-autocompleter

纱：

yarn add jquery-autocompleter

将插件添加到您的项目中

包括 jQuery：

 < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >

包括插件的代码：

 <!-- Styles -->
< link rel =" stylesheet " href =" css/jquery.autocompleter.css " />

<!-- Scripts -->
< script src =" js/jquery.autocompleter.min.js " > </ script >

调用插件：

 $ ( "input" ) . autocompleter ( {
  /* options */
} ) ;

示例

远程网址

 $ ( function ( ) {
  $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
} ) ;

清楚的

 var data = [
  { value : 1 , label : "one" } ,
  { value : 2 , label : "two" } ,
  { value : 3 , label : "three" } ,
] ;

$ ( function ( ) {
  $ ( "input" ) . autocompleter ( { source : data } ) ;
} ) ;

选项

自动完成器有以下选项：

姓名	类型	描述	默认值
来源	字符串、对象	服务器或本地对象的 URL	无效的
作为本地	布尔值	将远程响应解析为本地源	错误的
空的	布尔值	如果值为空则启动	真的
限制	整数	显示结果数	10
最小长度	整数	自动完成器的最小长度	0
延迟	整数	延迟请求几毫秒	0
自定义类	大批	具有自动完成器元素的自定义类的数组	[]
缓存	布尔值	将xhr数据保存到localStorage，避免重复请求	真的
缓存过期	整数	localStorage 数据生命周期（以秒为单位）（0 表示禁用缓存过期）	86400
焦点打开	布尔值	当输入获得焦点时启动自动完成程序	真的
输入选择	布尔值	允许使用 Enter 键进行选择	真的
暗示	布尔值	使用第一个匹配的标签向输入添加提示，应安装正确的样式	错误的
选择第一个	布尔值	如果设置为`true` ，自动完成列表中的第一个元素将被自动选择，如果changeWhenSelect打开则忽略	错误的
选择时更改	布尔值	允许使用自动完成列表中的箭头键导航更改输入值	真的
高亮匹配	布尔值	此选项定义自动完成结果中匹配项的`<strong>`标签换行	错误的
忽略的键码	大批	具有可忽略键码的数组，默认情况下： `9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145`	[]
自定义标签	斯特	将用作标签的对象属性的名称	错误的
自定义值	斯特	将用作值的对象属性的名称	错误的
发送前	功能	该函数在ajax请求之前触发	$.noop
在显示之前	功能	当列表准备好显示时触发此函数	$.noop
空时	功能	如果数据列表为空，则触发该函数	$.noop
项目上	功能	当每个项目准备显示时触发此函数	$.noop
列表打开	功能	该函数在列表显示时触发	$.noop
关闭列表	功能	该函数在列表隐藏时触发	$.noop
启动前	功能	该事件在新请求之前触发（包括本地缓存）	$.noop
模板	斯特	列表项的自定义模板。例如： `<span>{{ label }} is {{ customPropertyFromSource }}</span>` 。模板附加到`.autocompleter-item` 。	错误的
抵消	斯特	源响应偏移量，例如： `"response.items.posts"` 。 @deprecated使用`format`代替	错误的
格式	功能	格式化响应负载以返回源数据	无效的
结合	功能	返回一个扩展ajax数据的对象。如果您想传递一些额外的服务器选项，则很有用	$.noop
打回来	功能	选择值回调函数。参数： `value` 、 `index` 、 `object`	$.noop

方法

定义插件后更改选项

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

例如：

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ;

打开列表

 $ ( "#input" ) . autocompleter ( "open" ) ;

关闭列表

 $ ( "#input" ) . autocompleter ( "close" ) ;

销毁插件

 $ ( "#input" ) . autocompleter ( "destroy" ) ;

清除所有缓存

 $ . autocompleter ( "clearCache" ) ;

设置默认值

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ;

再举一个例子

用于名字输入的自动完成程序，具有缓存、匹配突出显示和 5 个结果限制。远程响应取决于性别：

表单标记

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset >

代码

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ;

标记

div (node) -> ul (list) -> li (item) 。

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >