主题: 3024-nightambiance-mobileambiancebase16-darkblackboardcobalteclipseerlang-darklesser-darkmbomdn-likemidnightmonokaineatneonightparaiso-darkpastel-on-darkrubybluesolarizedthe-matrixtomorrow-night-eightiesvibrant-ink 新窗口 视图: 左侧面板 HTML CSS JS 预览 F11(全屏显示选中的编辑器) 查看更多帮助信息

相关文章:

jQueryUI Autocomplete插件使用入门教程(最新版)

代码类型:

默认(HTML/CSS/JS) HTML混合(单页) PHP Java C# C++ C SQL

杂项:

• 启用CSS/JS语法检查
• 监测脚本运行错误
• 禁止库文件重复

文档类型:

HTML5 HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset 无

JS库文件:

无 jQuery 1.11.1jQuery 2.1.1jQuery 1.10.2jQuery 1.9.1jQuery 1.8.3jQuery 1.7.2jQuery 1.6.4jQuery 1.5.2jQuery 1.4.4jQuery 1.3.2jQuery 1.2.6

手动添加:

1. jQuery 1.11.1
3. jquery-ui.min.css
5. jquery-ui.min.js

<label for="language">请输入指定的语言：</label> <input id="language" name="language" type="text"> <input id="lang_id" name="lang_id" type="hidden" > <p id="msg">"你好"对应的翻译是：</p> <ul id="sayHiList"> </ul>

$("#language").autocomplete({ // 通过函数自定义处理数据源 source: function(request, response){ // request对象只有一个term属性，对应用户输入的文本 // response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表 // 获取所有已显示的语言的id var existsLangs = $("#sayHiList li").map(function(){ return $(this).attr("lang"); }).get().join(","); var url = '/app/public-actions.php?m=autocomplete&term='+ request.term + "&existsLangs=" + existsLangs; $.ajax( { 'url': url, dataType: 'json', success: function(dataObj){ response(dataObj); //将数据交给autocomplete去展示 } } ); }, select: function(event, ui){ // 这里的this指向当前输入框的DOM元素 // event参数是事件对象 // ui对象只有一个item属性，对应数据源中被选中的对象 $(this).value = ui.item.label; $("#lang_id").val( ui.item.value ); var html = '<li lang="' + ui.item.value + '">'; html += ui.item.sayHi + '(' + ui.item.label + ')'; html += '</li>'; $("#sayHiList").append( html ); // 必须阻止默认行为，因为autocomplete默认会把ui.item.value设为输入框的value值 event.preventDefault(); } });

#sayHiList { color: blue; }