admin管理员组

文章数量:1023282

I have a text box and multiple selection box. When ever I write something in text box it will filter that text in the multiple selection and show only matched value.

<!DOCTYPE html>
<html>

<body>
    <select id="uniqueCarNames" name="cars" multiple>
        <option value="volvo">Long Distance Travel</option>
        <option value="saab">Amazing </option>
        <option value="opel">Excellent Travelling</option>
        <option value="audi">I am rich</option>
    </select>
    <input type="text" id="filterMultipleSelection" />
</body>

</html>

So if I start writing in input box it will start filtering the values in selection box. I want the filtering using text of option tag. Please guide.

I have a text box and multiple selection box. When ever I write something in text box it will filter that text in the multiple selection and show only matched value.

<!DOCTYPE html>
<html>

<body>
    <select id="uniqueCarNames" name="cars" multiple>
        <option value="volvo">Long Distance Travel</option>
        <option value="saab">Amazing </option>
        <option value="opel">Excellent Travelling</option>
        <option value="audi">I am rich</option>
    </select>
    <input type="text" id="filterMultipleSelection" />
</body>

</html>

So if I start writing in input box it will start filtering the values in selection box. I want the filtering using text of option tag. Please guide.

  • javascript
  • jquery
  • html
  • drop-down-menu
  • autoplete
Share Improve this question edited Jun 17, 2015 at 20:18 s_k_t asked Jun 16, 2015 at 23:00 s_k_ts_k_t 7391 gold badge16 silver badges41 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 7

The .filter(function) jQuery method can be used to find the target option elements and show them as follows. The JavaScript method .toLowerCase() is used to make the search case-insensitive:

$('#filterMultipleSelection').on('input', function() {
    var val = this.value.toLowerCase();
    $('#uniqueCarNames > option').hide()
    .filter(function() {
        return this.value.toLowerCase().indexOf( val ) > -1;
    })
    .show();
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select id="uniqueCarNames" name="cars" multiple>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
    <input type="text" id="filterMultipleSelection" />

I have a text box and multiple selection box. When ever I write something in text box it will filter that text in the multiple selection and show only matched value.

<!DOCTYPE html>
<html>

<body>
    <select id="uniqueCarNames" name="cars" multiple>
        <option value="volvo">Long Distance Travel</option>
        <option value="saab">Amazing </option>
        <option value="opel">Excellent Travelling</option>
        <option value="audi">I am rich</option>
    </select>
    <input type="text" id="filterMultipleSelection" />
</body>

</html>

So if I start writing in input box it will start filtering the values in selection box. I want the filtering using text of option tag. Please guide.

I have a text box and multiple selection box. When ever I write something in text box it will filter that text in the multiple selection and show only matched value.

<!DOCTYPE html>
<html>

<body>
    <select id="uniqueCarNames" name="cars" multiple>
        <option value="volvo">Long Distance Travel</option>
        <option value="saab">Amazing </option>
        <option value="opel">Excellent Travelling</option>
        <option value="audi">I am rich</option>
    </select>
    <input type="text" id="filterMultipleSelection" />
</body>

</html>

So if I start writing in input box it will start filtering the values in selection box. I want the filtering using text of option tag. Please guide.

  • javascript
  • jquery
  • html
  • drop-down-menu
  • autoplete
Share Improve this question edited Jun 17, 2015 at 20:18 s_k_t asked Jun 16, 2015 at 23:00 s_k_ts_k_t 7391 gold badge16 silver badges41 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 7

The .filter(function) jQuery method can be used to find the target option elements and show them as follows. The JavaScript method .toLowerCase() is used to make the search case-insensitive:

$('#filterMultipleSelection').on('input', function() {
    var val = this.value.toLowerCase();
    $('#uniqueCarNames > option').hide()
    .filter(function() {
        return this.value.toLowerCase().indexOf( val ) > -1;
    })
    .show();
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select id="uniqueCarNames" name="cars" multiple>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
    <input type="text" id="filterMultipleSelection" />

本文标签： javascriptHow to filter values in Multiple selection using textbox valueStack Overflow

版权声明：本文标题：javascript - How to filter values in Multiple selection using textbox value - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745598998a2158343.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。