主题:
3024-night
ambiance-mobile
ambiance
base16-dark
blackboard
cobalt
eclipse
erlang-dark
lesser-dark
mbo
mdn-like
midnight
monokai
neat
neo
night
paraiso-dark
pastel-on-dark
rubyblue
solarized
the-matrix
tomorrow-night-eighties
vibrant-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.1
jQuery 2.1.1
jQuery 1.10.2
jQuery 1.9.1
jQuery 1.8.3
jQuery 1.7.2
jQuery 1.6.4
jQuery 1.5.2
jQuery 1.4.4
jQuery 1.3.2
jQuery 1.2.6
手动添加:
jQuery 1.11.1
jquery-ui.min.css
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"> "你好"对应的翻译是:<span id="sayHi"></span> </p>
$("#language").autocomplete({ // 静态的数据源 source: [ { label: "Chinese", value: 1, sayHi: "你好" }, { label: "English", value: 2, sayHi: "Hello" }, { label: "Spanish", value: 3, sayHi: "Hola" }, { label: "Russian", value: 4, sayHi: "Привет" }, { label: "French", value: 5, sayHi: "Bonjour" }, { label: "Japanese", value: 6, sayHi: "こんにちは" }, ], select: function(event, ui){ // 这里的this指向当前输入框的DOM元素 // event参数是事件对象 // ui对象只有一个item属性,对应数据源中被选中的对象 this.value = ui.item.label; $("#lang_id").val( ui.item.value ); $("#sayHi").html( ui.item.sayHi ); // 必须阻止默认行为,因为autocomplete默认会把ui.item.value设为输入框的value值 event.preventDefault(); } });
#sayHi { color: blue; }