如何将输入标签更改为具有功能的选择标签

时间:2019-06-16 14:41:12

标签: javascript html css

要替换输入框,我需要一个选择框,当选择一个选项时,该刷新框会刷新页面;但是我在使用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);
});

0 个答案:

没有答案