jQuery UI Beispiele -Autocomplete
Suchen und filtern auf Basis von Benutzereingaben, damit Benutzer schnell aus einer vordefinierten Werteliste finden und auswählen können.
Weitere Details zum Autocomplete-Widget finden Sie in der API-Dokumentation.Autocomplete-Widget。
In diesem Kapitel verwendetsearch.php Download。
Standardfunktionalität
Während Sie in das Eingabefeld tippen, liefert das Autocomplete-Widget entsprechende Vorschläge. In diesem Beispiel werden Vorschläge für Programmiersprachen bereitgestellt; Sie können versuchen, "ja" einzugeben, um Java oder JavaScript zu erhalten.
Die Datenquelle ist ein einfaches JavaScript-Array, das dem Widget über die source-Option bereitgestellt wird.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<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"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">标签:</label>
<input id="tags">
</div>
</body>
</html>
Akzentempfindlichkeit
Das Autocomplete-Feld verwendet eine benutzerdefinierte source-Option, um Ergebniselemente mit akzentuierten Zeichen abzugleichen, selbst wenn das Textfeld keine akzentuierten Zeichen enthält. Wenn Sie jedoch akzentuierte Zeichen in das Textfeld eingeben, werden nicht akzentuierte Ergebniselemente nicht angezeigt.
Versuchen Sie, "Jo" einzugeben, um "John" und "Jörn" zu sehen, und geben Sie dann "Jö" ein, um nur "Jörn" zu sehen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 包含重音</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i < term.length; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value = value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form>
<label for="developer">开发人员:</label>
<input id="developer">
</form>
</div>
</body>
</html>
Kategorien
Kategorisierte Suchergebnisse. Versuchen Sie, "a" oder "n" einzugeben.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 分类</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
that._renderItemData( ul, item );
});
}
});
</script>
<script>
$(function() {
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data
});
});
</script>
</head>
<body>
<label for="search">搜索:</label>
<input id="search">
</body>
</html>
Kombinationsfeld
Ein benutzerdefiniertes Widget, das aus Autocomplete und Button erstellt wurde. Sie können einige Zeichen eingeben, um Ergebnisse zu erhalten, die auf Ihrer Eingabe basieren, oder die Schaltfläche verwenden, um aus der vollständigen Liste auszuwählen.
Die Eingabe wird aus einem vorhandenen select-Element gelesen und mit einer benutzerdefinierten source-Option an Autocomplete übergeben.
Dies ist ein nicht unterstütztes, unvollkommenes Widget. Es dient ausschließlich dazu, Anpassungsfunktionen für Autocomplete zu demonstrieren.Für weitere Details zur Funktionsweise dieses Widgets klicken Sie hier, um den zugehörigen jQuery-Artikel anzuzeigen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 组合框(Combobox)</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* 支持: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
}
</style>
<script>
(function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
// 如果已经可见则关闭
if ( wasOpen ) {
return;
}
// 传递空字符串作为搜索的值,显示所有的结果
input.autocomplete( "search", "" );
});
},
_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},
_removeIfInvalid: function( event, ui ) {
// 选择一项,不执行其他动作
if ( ui.item ) {
return;
}
// 搜索一个匹配(不区分大小写)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});
// 找到一个匹配,不执行其他动作
if ( valid ) {
return;
}
// 移除无效的值
this.input
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
this.input.data( "ui-autocomplete" ).term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );
$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label>您喜欢的编程语言:</label>
<select id="combobox">
<option value="">请选择...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
<button id="toggle">显示基础的选择框</button>
</body>
</html>
Benutzerdefinierte Daten und Anzeige
Sie können ein benutzerdefiniertes Datenformat verwenden und die Daten anzeigen, indem Sie einfach die standardmäßigen focus- und select-Verhalten überschreiben.
Versuchen Sie, "j" einzugeben, oder drücken Sie die Pfeiltaste nach unten, um eine Liste mit Elementen zu erhalten.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 自定义数据并显示</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<div id="project-label">选择一个项目(请键入 "j"):</div>
<img id="project-icon" src="images/transparent_1x1.png.html" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
</body>
</html>
Mehrere Werte
Verwendung: Geben Sie einige Zeichen ein, z. B. "j", um Ergebnisse für zugehörige Programmiersprachen zu sehen. Wählen Sie einen Wert aus und geben Sie dann weitere Zeichen ein, um weitere Werte hinzuzufügen.
Dieses Beispiel zeigt, wie Sie die source-Option und einige Ereignisse verwenden, um mehrere Autocomplete-Werte in einem einzigen Textfeld zu implementieren.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 多个值</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<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();
}
$( "#tags" )
// 当选择一个条目时不离开文本域
.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 ) {
// 回到 autocomplete,但是提取最后的条目
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// 防止在获得焦点时插入值
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// 移除当前输入
terms.pop();
// 添加被选项
terms.push( ui.item.value );
// 添加占位符,在结尾添加逗号+空格
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">编程语言:</label>
<input id="tags" size="50">
</div>
</body>
</html>
Mehrere Werte, remote
Verwendung: Geben Sie mindestens zwei Zeichen ein, um Vogelnamen zu erhalten. Wählen Sie einen Wert aus und geben Sie dann weitere Zeichen ein, um weitere Werte hinzuzufügen.
Dieses Beispiel zeigt, wie Sie die source-Option und einige Ereignisse verwenden, um mehrere Autocomplete-Werte in einem einzigen Textfeld zu implementieren.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 多个值,远程</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url('/try/jqueryui/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#birds" )
// 当选择一个条目时不离开文本域
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "search.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// 自定义最小长度
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// 防止在获得焦点时插入值
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// 移除当前输入
terms.pop();
// 添加被选项
terms.push( ui.item.value );
// 添加占位符,在结尾添加逗号+空格
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">鸟:</label>
<input id="birds" size="50">
</div>
</body>
</html>
Remote-JSONP-Datenquelle
Verwendung: Geben Sie mindestens zwei Zeichen ein, um Vogelnamen zu erhalten. Wählen Sie einen Wert aus und geben Sie dann weitere Zeichen ein, um weitere Werte hinzuzufügen.
Dieses Beispiel zeigt, wie man jsonp verwendet, um Daten abzurufen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.ui-autocomplete-loading {
background: white url('/try/jqueryui/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "/try/jqueryui/search.php",
dataType: "jsonp",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
} );
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
Remote-Datenquelle
Während Sie Zeichen in das Textfeld eingeben, liefert das Autocomplete-Widget vorgeschlagene Ergebnisse. In diesem Beispiel werden, wenn Sie mindestens zwei Zeichen in das Textfeld eingeben, verwandte Vogelnamen angezeigt.
In diesem Beispiel ist die Datenquelle ein serverseitiges Skript, das JSON-Daten zurückgibt, angegeben über eine einfache source-Option. Außerdem ist die minLength-Option auf 2 gesetzt, um zu vermeiden, dass die Abfrage zu viele Ergebnisse zurückgibt, und das select-Event wird verwendet, um etwas Feedback anzuzeigen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 远程数据源</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url('/try/jqueryui/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">鸟:</label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
结果:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
Remote-Caching
Während Sie Zeichen in das Textfeld eingeben, liefert das Autocomplete-Widget vorgeschlagene Ergebnisse. In diesem Beispiel werden, wenn Sie mindestens zwei Zeichen in das Textfeld eingeben, verwandte Vogelnamen angezeigt.
Zur Verbesserung der Leistung wird hier einiges lokales Caching hinzugefügt; ansonsten ähnelt es dem Beispiel zur Remote-Datenquelle. Hier speichert der Cache nur eine Abfrage und kann erweitert werden, um mehrere Werte zu cachen, einen Wert pro Eintrag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 远程缓存</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url('/try/jqueryui/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
var cache = {};
$( "#birds" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
$.getJSON( "search.php", request, function( data, status, xhr ) {
cache[ term ] = data;
response( data );
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">鸟:</label>
<input id="birds">
</div>
</body>
</html>
Scrollbare Ergebnisse
Wenn Sie eine lange Liste von Optionen anzeigen, können Sie einfach max-height für das Autocomplete-Menü festlegen, um zu verhindern, dass es zu lang wird. Versuchen Sie, "a" oder "s" einzugeben, um eine scrollbare lange Ergebnisliste zu erhalten.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 可滚动的结果</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* 防止水平滚动条 */
overflow-x: hidden;
}
/* IE 6 不支持 max-height
* 我们使用 height 代替,但是这会强制菜单总是显示为那个高度
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<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"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">标签:</label>
<input id="tags">
</div>
</body>
</html>
XML-Daten
Dieses Beispiel zeigt, wie man einige XML-Daten abruft, sie mit jQuery-Methoden parst und sie dann als Datenquelle für Autocomplete bereitstellt.
Dieses Beispiel kann auch als Referenz für das Parsen von Remote-XML-Datenquellen verwendet werden - das Parsen erfolgt bei jeder Source-Callback-Anfrage.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - XML 数据</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-autocomplete-loading { background: white url('/try/jqueryui/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
}
$.ajax({
url: "/try/jqueryui/london.xmllondon.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = $( "geoname", xmlResponse ).map(function() {
return {
value: $( "name", this ).text() + ", " +
( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
id: $( "geonameId", this ).text()
};
}).get();
$( "#birds" ).autocomplete({
source: data,
minLength: 0,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">London 匹配:</label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
结果:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
Weitere Erweiterungen