ドロップダウンリスト内の入力フィールドが検索結果を絞り込むために動作しません。

Question

私のウェブサイトのデータフィルタで作業しています。私はajaxベースの相互リンク型ドロップダウンフィルタを実装しています。

たとえば：1番目のドロップダウンでユーザーが国を選択する必要があり、次に2番目のドロップダウンの州が入力され、州のリストを選択した後3番目のドロップダウンに入力されます。

私の主な関心事は、ドロップダウンリスト内の検索機能に画像のように検索範囲を絞りたいということです。ここ

は私のコードです：
HTML

<select name="country" id="country"> 
    <option>select country</option> 

<?php 
    $sql = "SELECT * from plus2_country ORDER BY country ASC"; 
    $result = mysqli_query($conn,$sql) or die(mysqli_error($conn)); 
    $row_count = mysqli_num_rows($result); 
    if($row_count > 0) 
    { 
     while($row = mysqli_fetch_array($result)) 
     { 
      echo '<option value="'.$row['country_code'].'">'.$row['country'].'</option>'; 
     } 
    } 
    else 
    { 
     '<option value="">Country not available</option>'; 
    } 
?> 

のjQueryだけで、事前にdropdown.Thanksでテキストボックスのフィルタを実装するために私を助け

$(document).ready(function(){ 
$('#country').on('change',function(){ 
    var country_code = $(this).val(); 
    console.log(country_code); 
    if(country_code){ 
     $.ajax({ 
      type:'POST', 
      url:'dependent.php', 
      data:'country_code='+country_code, 
      success:function(html){ 
       console.log(html); 
       $('#state').html(html); 
       $('#city').html('<option value="">Select state first</option>'); 

      } 
     }); 
    }else{ 
     $('#state').html('<option value="">Select country first</option>'); 
     $('#city').html('<option value="">Select state first</option>'); 
    } 
}); 

Answer 1

$('.dropdown-menu input').click(function (e) { 
e.stopPropagation(); 
}); 
$('.dropdown-menu li').click(function(){ 

$('.dropdown-toggle b').remove().appendTo($('.dropdown- toggle').text($(this).text())); 
}); 

Demo

Answer 2

あなたがangularjsについて知っているならば、あなたは、その後、https://material.angularjs.org/latest/demo

ことにより、容易にそれを行う、このコードを使用することができます：

<md-input-container class="md-block" flex="60"> 
<label>state</label> 
<md-select ng-model="selectedState" name="State" md-on-close="clearSearchState()" required> 
<md-select-header> 
     <input ng-model="searchState" type="search" placeholder="search..."> 
</md-select-header> 
<md-optgroup label="stateItem"> 
<md-option ng-value="stateItem" ng-repeat="stateItem in states | filter:searchState">{{stateItem.State}}</md-option> 
    </md-optgroup> 
</md-select> 
<div ng-messages="addBranch.City.$error"> 
     <div ng-message="required">please feel the input</div> 
</div> 

とコントローラで定義：

$scope.states=[{"State":"state1","ID":"1"},{"State":"state2","ID":"2"}]; 
$scope.searchState; 
$scope.clearSearchState = function() {$scope.searchState = '';}; 
$element.find('input').on('keydown', function(ev) {ev.stopPropagation();}); 

を