как изменить список содержит как пользователь печатает?

Question

У меня есть ввод и datalist вот так.

<input list="BrandTitle" name="BrandTitle">
<datalist id="BrandTitle">
      {% for item in brand_list %}
          <option value="{{item.Title}}">
      {% endfor %}
</datalist>

Теперь я хочу, чтобы когда я что-то набирал, я получал это на стороне сервера и отправлял это в веб-службы SOAP. и создайте brand_list из ответа веб-сервиса. Я хочу изменить brand_list, когда пользователь печатает!

, например, когда в списке типа «а» отображается:

«Apple», «Facebook», «Amazon»

и когда тип 'ap' показывает:

'Apple'

Answer 1

Основной способ сделать это - использовать чистый JavaScript без использования какой-либо инфраструктуры. Смотрите следующий код:

    <input name="BrandTitle" list="BrandTitle" onkeyup="autoccomplete(this.value)" >
<datalist id="BrandTitle">
      {% for item in brand_list %}
          <option value="{{item.Title}}">
      {% endfor %}
</datalist>

<script type="text/javascript"> 
    var brandTitle = [  
    "Amazon", 
    "Apple", 
    "facebook" 
     ];
     var n= brandTitle.length;

     function autocomplete(value) 
     { 
        document.getElementById('BrandTitle').innerHTML = ''; 
        l=value.length; 
        for (var i = 0; i < n; i++) 
        { 
         if(((brandTitle[i].toLowerCase()).indexOf(value.toLowerCase()))>-1) 
         { 
             var newOption = document.createElement("option"); 
             var value = document.createTextNode(brandTitle[i]); 
              node.appendChild(value); 

               document.getElementById("BrandTitle").appendChild(newOption); 
             } 
         } 
     } 

</script> 

Надеюсь, это поможет вам