[英]AutoComplete in a jquery dropDown
我有一個dropdownList,其中包含客戶的個人資料名稱。
隨着客戶數量的增長,我需要一種自動完成功能,以便能夠通過建議查找特定的用戶,而不必在下拉列表中尋找每個現有用戶。
以下代碼從數據庫中獲取數據:
$.getJSON(
"profiles/custoomer.aspx?callback=?",
{},
function (data) {
$.each(data, function (value, name) {
$('<option>').attr('value', value).text(name).appendTo('#customer_profile');
});
}
);
如何添加自動完成功能?
您是否嘗試使用自動完成組件? 這是他的文檔,易於使用和易於自定義!
嘗試使用下面的示例,不要忘記包括Jquery最新文件;)Njoy Bro
<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>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
$(function() {
var availableTags = ["ribstar","major"];
$( "#search" ).autocomplete({
source: availableTags,
select: function( event, ui )
{
var $this = $(this).val(ui.item.label);
$('#sub_cat').children('[name="'+$this.val()+'"]').attr('selected', true);
}
});
});
和html部分
<div class="ui-widget"><label for="tags">Search: </label><input type="text" name="search" id="search"></div>
<select name="sub_cat" id="sub_cat">
<option value="1" name="ribstar">ribstar</option>
<option value="2" name="major">major</option>
</select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.