![](/img/trans.png)
[英]Search in Input text And then search results will be dropdown list using Ajax PHP
[英]input field within dropdown list to narrow down search results is not working
我正在处理我网站的数据过滤器。我正在实现基于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-menu input').click(function (e) {
e.stopPropagation();
});
$('.dropdown-menu li').click(function(){
$('.dropdown-toggle b').remove().appendTo($('.dropdown- toggle').text($(this).text()));
});
如果您了解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();});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.