Как использовать Ajax и структуру HTML для эхо-автозаполнения?

Question

1. Я хочу создать окно поиска автозаполнения. он получает JSON и отправляет их в HTML5 <datalist> из <option> s.

Он отлично работает, но он не может использовать пробелы в значениях! поэтому он просто возвращает первое слово. например, если jresults.name «отпускает» - я получаю только «позволяет».

Каков наилучший способ сделать это?

2. Эта часть: $("#prod_name_list").children().remove(); не позволяет мне выбрать вариант из списка. потому что он удаляет все в нем, когда я «keyup», поэтому мне нужно другое решение для этого.

3. Вторая часть после отправки формы я хочу получить идентификатор выбранного объекта. (jresults.id), и я не уверен, как получить его с помощью submit.

МОЙ КОД:

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 часть (с использованием CodeIgniter Синтаксисы для формы:

<?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() работает хорошо для этого. Он будет перебирать каждый элемент массива и помещать его в k, а каждый объект - в v. Затем мы генерируем строку из всех опций и заменяем все, что находится внутри нашего datalist Итак, если в результирующем наборе есть 15 вариантов для первого символа, он будет заменен следующим нажатием клавиши с любым результатом, который мы получаем.

Использование .remove() и .append(), на мой взгляд, становится громоздким для этого типа приложений. Вы хотите удалить все параметры или заменить их любыми новыми данными, которые вы получаете. В моем рабочем примере, когда нажата клавиша, мы видим:

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

Надеюсь, это ясно и поможет вам. Если это не так, оставьте комментарий и сообщите мне.

Update

Я думаю, что вы можете использовать в <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».