如何使用Ajax和HTML結構來回顯自動填充選項？

Question

1. 我想創建一個自動填充搜索框。它會得到一個JSON並將它們發送到<option> s的HTML5 <datalist>。

它工作正常，但它不能在值中使用空格！所以它只是返回第一個單詞。例如，如果jresults.name是「放手」 - 我只能得到「讓」。

這樣做的最佳方法是什麼？

1. 這部分：$("#prod_name_list").children().remove();阻止我從列表中選擇一個選項。因爲它會刪除它中的所有內容，所以我需要一個不同的解決方案。

2. 第二部分是在提交表單後，我想獲取對象的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> 

Answer 1

有幾件事情在這裏工作的，但讓我們跳進一個實際的例子：https://jsfiddle.net/Twisty/a2z7e1yb/

的HTML我測試：

Name: <input class="prod_name" id="prod_name" name="prod_name" list="prod_name_list" /> 
<datalist id="prod_name_list"> 

</datalist> 

的JQuery的我會建議使用：

$(document).ready(function() { 
    $("#prod_name").keyup(function() { 
    $.ajax({ 
     method: "POST", 
     url: "<?php echo site_url('kas/search_prod_name'); ?>", 
     data: { 
     "prod_name": $("#prod_name").val(); 
     }, 
     success: function(result) { 
     console.log(result); 
     var options = ""; 
     $.each(result, function(k, v) { 
      console.log("name: " + v.name); 
      options += "<option value='" v.name + "'>\r\n"; 
     }); 
     console.log(options); 
     $("#prod_name_list").html(options); 
     } 
    }); 
    }); 
}); 

正如所提到的，你可以使用onKeyPress與onKeyUp。我把它留給你。

我做了測試數據的測試看起來像：

[ 
    { 
    "name": "Lets Go" 
    }, { 
    "name": "Go More" 
    } 
] 

的$.each()很適合這一點。它將迭代每個數組項，並將它的Key放入k，並將每個對象放入v。然後我們生成所有選項的字符串並替換datalist中的任何內容。因此，如果結果集是第一個字符的15個選項，那麼它將被我們得到的任何結果集替換爲下一個擊鍵。

使用.remove()和.append()，在我看來，這種類型的應用程序變得很麻煩。您想要刪除所有選項，或將其替換爲您收到的任何新數據。在我的工作示例中，當按下某個鍵時，我們看到：

<datalist id="prod_name_list"> 
    <option value="0">Lets Go</option> 
    <option value="1">Go More</option> 
</datalist> 

我希望這是明確的，可以幫助您。如果不是，請發表評論並告訴我。

更新

我想你可能被錯誤地使用<datalist>標籤。它應該在頁面加載時完全填充，而不是在輸入文本之後填充。查看更多在這裏：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

應該使用像這樣：https://jsfiddle.net/Twisty/a2z7e1yb/2/

<label>Name: 
<input class="prod_name" id="prod_name" name="prod_name" list="prod_name_list" /></label> 
<datalist id="prod_name_list"> 
    <option value="Let's Go" /> 
    <option value="No Go" /> 
    <option value="Go Back to Bed" /> 
</datalist> 

如果你真的想使它像jQuery UI的自動完成，你將建立一個<ul>或<div>的結果作爲內部列表。這個列表將在按下按鍵時填充，只顯示相關結果。例如，如果「L」被按下，它會將這個值傳給你的PHP，它會顯示「Let's Go」和任何其他以「L」開頭的產品名稱。它不同於<datalist>，它會在您的列表中查找包含「L」的任何內容。