jQuery实现用户输入自动完成功能

作者：袖梨 2022-06-25

利用jQuery UI中Auto-complete插件实现输入自动完成功能，大家在使用诸如淘宝、京东等电商平台搜索商品时，往往只要输入商品的一些特殊字符，就可以显示出和该字符相近的列表菜单，用户使用鼠标或者键盘方向键就可以快速选择，实现了很好的用户体验。

1.最简单的用户输入自动完成

代码如下 复制代码

jQuery UI Autocomplete - Default functionality

$(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

});

});

请输入:

相关文章

精彩推荐