indexOf 实现搜索功能

 

HTML代码：

<input type="text" oninput="FuzzySearch(this)" class="form-control">
<select id="{{ field.name }}_left" multiple class="form-control {{ field.name }}">
    {% for obj in unselected_m2m_objects %}
        <option value="{{ obj.id }}">{{ obj }}</option>
    {% endfor %}
</select>

 

Jquery代码：

function FuzzySearch(self) {
    var select_ele = $(self).next();
    var search_text = $(self).val();
    $(select_ele).children().each(function () {
        if ($(this).text().indexOf(search_text) == -1){
            $(this).addClass('hidden');
        } else {
            $(this).removeClass('hidden');
        }
    })
}

 

实现效果：

搜索前

 

搜索后