Question

我正在研究我网站的数据过滤器。我正在实现基于ajax的互连下拉过滤器。

例如：在第一个下拉列表中，用户需要选择国家/地区，然后将填充第二个下拉状态，选择州城市列表后将填入第三个下拉列表。

所以我主要担心的是，我还希望在下拉列表中提供搜索功能，以缩小搜索范围，如图像。

这是我的代码：
的 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

    $(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>'); 
    }
});

帮我在dropdown中实现文本框过滤器。提前谢谢

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();});

下拉列表中的输入字段缩小搜索结果范围不起作用

2 个答案: