要替换输入框,我需要一个选择框,当选择一个选项时,该刷新框会刷新页面;但是我在使用JS时非常困难。
https://codepen.io/uzair-siddiqi/pen/ZNoZZV
HTML
<div class="search-tools clearfix">
<h2>Location Search <small></small></h2>
<div class="col-sm-6">
<input id="search" type="text" class="form-control" placeholder="Name or expertise..."/>
</div>
<div class="col-sm-6">
<select name="state" id="state" class="form-control">
<option value="none">Location</option>
<option value="Oh">Oldham</option>
<option value="Rd">Rochdale</option>
</select>
var performSearch = function(args) {
var $dln = $('.dln-member');
var $filtered = $dln.filter(function(i, el) {
var data = $(el).data();
var success = false;
var state_filter = false;
for(var d in data) {
switch(d) {
case 'name':
case 'expertise':
success = isValidSearch(data[d], args.input) || success;
break;
case 'state':
state_filter = isValidState(data[d], args.state);
break;
default:
break;
}
}
return success && state_filter;
});
return $filtered;
};
var getArgs = function() {
var input = $('#search').val();
var select = $('#state option:selected').val();
return {
'input': input,
'state': select
};
};
var isValidSearch = function(term, search) {
search = ('' + search).toLowerCase();
return term.toString().toLowerCase().indexOf(search) > -1 || search.length <= 0;
};
var isValidState = function(state, state_filter) {
state_filter = ('' + state_filter).toLowerCase();
return state == state_filter || state_filter == 'none';
};
var toggleResults = function($result) {
$('.dln-member').hide();
$result.show();
};
var search = function() {
var args = getArgs();
var $result = performSearch(args);
toggleResults($result);
};
$(function() {
$('#search').on('keyup', search);
$('#state').on('change', search);
});