jQuery 入门教程(24): jQuery UI Autocomplete示例（二）

最新推荐文章于 2019-05-25 15:24:23 发布

iteye_9252

最新推荐文章于 2019-05-25 15:24:23 发布

阅读量299

点赞数

文章标签： ui javascript java ViewUI

如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用AutoComplete为每个输入项提供输入提示。不过此时除了设置数据源外，还需要添加一些事件处理。

 
   1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
   9
 
<script> 
 
$(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" 
 
]; 
 
function split(val) { 
 
return val.split(/,\s*/); 
 
} 
 
function extractLast(term) { 
 
return split(term).pop(); 
 
} 
 
   42
 
$("#tags") 
 
// don't navigate away from the field on tab 
 
//when selecting an item 
 
.bind("keydown", function (event) { 
 
if (event.keyCode === $.ui.keyCode.TAB && 
 
$(this).data("ui-autocomplete").menu.active) { 
 
event.preventDefault(); 
 
} 
 
}) 
 
.autocomplete({ 
 
minLength: 0, 
 
source: function (request, response) { 
 
// delegate back to autocomplete, 
 
// but extract the last term 
 
response($.ui.autocomplete.filter( 
 
availableTags, extractLast(request.term))); 
 
}, 
 
focus: function () { 
 
// prevent value inserted on focus 
 
return false; 
 
}, 
 
select: function (event, ui) { 
 
var terms = split(this.value); 
 
// remove the current input 
 
terms.pop(); 
 
// add the selected item 
 
terms.push(ui.item.value); 
 
// add placeholder to get the 
 
//comma-and-space at the end 
 
terms.push(""); 
 
this.value = terms.join(", "); 
 
return false; 
 
} 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<divclass="ui-widget"> 
 
<labelfor="tags">Tag programming languages: </label> 
 
<inputid="tags"size="50"/> 
 
</div> 
 
</body> 
 
</html>