AJAXオートコンプリートの確認

Question

データベースから都市名を取得するために、AJAX、PHP、MYSQLでオートコンプリートを成功させました。テキストボックスにオートコンプリート値と型付き値の両方を許可します。ただし、ユーザーが自分自身で都市名を入力した後にテキストボックスから出てきたときに、テキストボックスを空にするためにjavascriptを修正してください。以下

は、HTMLとJSコードの代わりに、オートコンプリートのプラグイン

---

<input type="text" id="city" name="locality" style="padding:1px;" required=""> 

---

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#outer_container').height($(window).height()); 

     $('#city').autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        url:'ajax.php', 
        dataType:"json", 
        method: 'post', 
        data: { 
         name_startsWith: request.term, 
         type:'city' 
        }, 
        success: function(data) { 
         response($.map(data, function(item) { 
          console.log(item); 
          //var code = item.split("|"); 
           return { 
            label: item, 
            value: item, 
            data : item 
           } 
          })); 
         } 
        }); 
      }, 
      autoFocus: true,    
      minLength: 1, 
      select: function(event, ui) { 
       /* $('#myButton').show(); 
       var names = ui.item.data.split("|"); 
       $(this).val(names[1]); 
       getClientAddress(names[0]); */ 
      }    
     }); 
    }); 

</script> 

Answer 1

使用SELECT2あります。 ここで例を確認できますhttps://select2.github.io/examples.html