jquery自动补全插件autocomplete.js

jquery自动补全插件autocomplete.js ie兼容6

 查看演示  website  立即下载)

插件描述：autocomplete.js 是 jQuery 插件，高度自定义，可以改进搜索功能，搜索框输入时，可以智能补全搜索内容。

autocomplete.js使用方法

Html:

1

<`input type="text" name="country" id="autocomplete"`/>

Ajax 查找

1

2

3

4

5

6

$(`'#autocomplete'`).autocomplete({

serviceUrl: `'/autocomplete/countries'`,

onSelect: `function (suggestion) {`

alert(`'You selected: ' + suggestion.value + `', ' + suggestion.data);

}

});

本地查找 (没有 Ajax):

1

2

3

4

5

6

7

8

9

10

11

12

var countries = [

{ value: 'Andorra', data: 'AD' },

// ...

{ value: 'Zimbabwe', data: 'ZZ' }

];

$('#autocomplete').autocomplete({

lookup: countries,

onSelect: function (suggestion) {

alert('You selected: ' + suggestion.value + ', ' + suggestion.data);

}

});

自定义查找函数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$(`'#autocomplete'`).autocomplete({

lookup: `function (query, done) {`

// Do Ajax call or lookup locally, when done,

// call the callback and pass your results:

var result = {

suggestions: [

{ `"value": "United Arab Emirates", "data": "AE" },`

{ `"value": "United Kingdom",       "data": "UK" },`

{ `"value": "United States",        "data": "US" }`

]

};

done(result);

},

onSelect: `function (suggestion) {`

alert(`'You selected: ' + suggestion.value + `', ' + suggestion.data);

}

});

PREVIOUS:

NEXT:

jQuery全屏图片点击滑动手风琴

jQuery图片缩放拖动查看插件jquery.imgZoom

Original url: Access
Created at: 2020-07-16 20:35:03
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论