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

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

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

文章标签：

如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用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>