- 我想創建一個自動填充搜索框。它會得到一個JSON並將它們發送到
<option>
s的HTML5<datalist>
。
它工作正常,但它不能在值中使用空格!所以它只是返回第一個單詞。例如,如果jresults.name
是「放手」 - 我只能得到「讓」。如何使用Ajax和HTML結構來回顯自動填充選項?
這樣做的最佳方法是什麼?
這部分:
$("#prod_name_list").children().remove();
阻止我從列表中選擇一個選項。因爲它會刪除它中的所有內容,所以我需要一個不同的解決方案。第二部分是在提交表單後,我想獲取對象的id選擇。 (
jresults.id
),我不確定如何使用提交檢索它。
我的代碼:
JS部分:
$("#prod_name").bind("keyup", function(e) {
if (e.which <= 90 && e.which >= 48){
$("#prod_name_list").children().remove();
var prod_name = $("#prod_name").val();
$.ajax({
method: "POST",
url: "<?php echo site_url('kas/search_prod_name'); ?>",
data: ({ "prod_name": prod_name }),
success: function (result){
var jresults = JSON.parse(result);
console.log("jresults: "+jresults);
var lng = jresults.length;
console.log("lng: "+lng);
for (var i=0; i<lng; i++) {
if (jresults.hasOwnProperty(i)) {
console.log("name: "+jresults[i].name);
$("#prod_name_list").append("<option name=\"prod_id\" id="+jresults[i].id+">"+jresults[i].name+"</option>");
}
}
}
});
}
});
HTML部分(使用笨語法的形式:
<?php
$attributes = array('class' => 'prod_name', 'id' => 'prod_name', 'name' => 'prod_name', 'list' => 'prod_name_list');
echo form_input('prod_name', 'prod Name', $attributes);
?>
<datalist id="prod_name_list">
</datalist>
我會建議你看看https://jqueryui.com/autocomplete/我知道這不是你的問題的答案。但它會幫助您輕鬆實現自動完成。它選擇了事件處理程序。在選擇時,您可以將ID保留在隱藏字段中。我現在正在使用手機,並沒有太大的幫助。 – Mandy
我不想使用jQuery UI。我不想將不相關的庫加載到我的網站只有一件事:X –
您已經在使用JQuery,因此給了您一個建議。 – Mandy