[英]Autocomplete JQuery-UI Undefined List
我一直在使用jQuery UI Autocomplete從數據庫提出建議並自動完成其余字段。 javascript可以正常工作,但是輸出如下:
但是,如果我按下按鈕並輸入,該字段將使用數據庫中的值完成。
這是我的javascript:
$(function() {
//clear values on refresh
$('#nmbr').val("");
$(".kdbr").autocomplete({
source: function (request, response) {
$.ajax({
url: "<?php echo base_url();?>js/coba3.php",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
// var data = $.parseJSON(response);
response($.map(data, function (el) {
return {
kdbr: el.kdbr,
nmbr: el.nmbr
};
}));
}
});
},
select: function (event, ui) {
// Prevent value from being put in the input:
event.preventDefault();
this.value = ui.item.kdbr;
// Set the next input's value to the "value" of the item.
$('#nmbr').val(ui.item.nmbr);
}
});
});
這是我的html代碼:
<form action="#" method="post">
<p><label for="kdbr">KDBR</label><br />
<input type="text" name="kdbr" id="kdbr" class = "kdbr" value="" /></p>
<p><label for="nmbr">NMBR</label><br />
<input type="text" name="nmbr" id="nmbr" class = "nmbr" value="" /></p>
</form>
這是我使用的javascript版本
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
我必須將其寫入,因為當我使用1.8.1版時,列表顯示單詞
未定義
正如我在圖片上看到的,我認為您沒有包括jquery-ui的樣式表,因為自動完成的樣式不正確。
請包括all.css或僅包括特定的autocomplete.css
https://github.com/jquery/jquery-ui/tree/master/themes/base
並用這條線
select: function (event, ui) {
// Prevent value from being put in the input:
event.preventDefault();
this.value = ui.item.kdbr;
// Set the next input's value to the "value" of the item.
$('#nmbr').val(ui.item.nmbr);
return false; //<--- you need to add this
}
並更改
return {
kdbr: el.kdbr,
nmbr: el.nmbr
};
對此
return {
label: el.kdbr,
value: el.nmbr
};
自動完成功能需要包含該值及其標簽的項目的json返回值
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.