jquery - Javascript - filtering data with text input box - Stack Overflow

admin管理员组

文章数量:1025235

I am trying to create filtering function where user can start typing text in the input box and the function will show/hide data as the user is typing. Also it needs to bine two or more words, but only to show the results which have that bination of words, and not to show data where the words can be found (as the function is working at the moment). I am trying to create this some time and I am out of ideas what to do.

This is the last working code (JS Fiddle demo):

HTML:

<div class="gallery-search">
    <input type="text" name="input-filter" class=form-control id="input-filter" placeholder="Search Here">
</div>
<div>  
    <a class="gallery"  data-tags="chaos board nordic viking warriors display ship dock warhammer fantasy"></a>
    <a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery gaming board wasteland warhammer 40k"></a>
    <a class="gallery" data-tags="modular nurgle imperial chaos gaming board toxic crossroad warhammer 40k"></a>
    <a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery warhammer 40k"></a>
    <a class="gallery" data-tags="ork orc fort fortress modular palisade wood skaven scenery warhammer fantasy"></a>   
</div>

JS:

var inputFilter = $('#input-filter');
inputFilter.on('keyup', function() {

            var
                $this  = $(this),
                search = $this.val().toLowerCase(),
                words = search.split(/\s+/),
                data;

                if(search.length > 2){
                    $('.gallery').hide();
                    $('a[data-tags]').filter(function(){
                       // splitting the data-tags attribute to an array of words:
                       data = this.dataset.tags.split(/\s+/);

                       // looking to see if any of the words (from the value)
                       // are present in the array formed from the data-tags
                       // attribute, using Array.prototype.some() to iterate
                       // over the given array, returning a Boolean true or false:
                       return words.some(function (word) {
                           return data.indexOf(word) > -1;
                       });
                   }).show();
                }

                if(search == ''){
                    $('.gallery').show();
                }

        });

I am trying to create filtering function where user can start typing text in the input box and the function will show/hide data as the user is typing. Also it needs to bine two or more words, but only to show the results which have that bination of words, and not to show data where the words can be found (as the function is working at the moment). I am trying to create this some time and I am out of ideas what to do.

This is the last working code (JS Fiddle demo):

HTML:

<div class="gallery-search">
    <input type="text" name="input-filter" class=form-control id="input-filter" placeholder="Search Here">
</div>
<div>  
    <a class="gallery"  data-tags="chaos board nordic viking warriors display ship dock warhammer fantasy"></a>
    <a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery gaming board wasteland warhammer 40k"></a>
    <a class="gallery" data-tags="modular nurgle imperial chaos gaming board toxic crossroad warhammer 40k"></a>
    <a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery warhammer 40k"></a>
    <a class="gallery" data-tags="ork orc fort fortress modular palisade wood skaven scenery warhammer fantasy"></a>   
</div>

JS:

var inputFilter = $('#input-filter');
inputFilter.on('keyup', function() {

            var
                $this  = $(this),
                search = $this.val().toLowerCase(),
                words = search.split(/\s+/),
                data;

                if(search.length > 2){
                    $('.gallery').hide();
                    $('a[data-tags]').filter(function(){
                       // splitting the data-tags attribute to an array of words:
                       data = this.dataset.tags.split(/\s+/);

                       // looking to see if any of the words (from the value)
                       // are present in the array formed from the data-tags
                       // attribute, using Array.prototype.some() to iterate
                       // over the given array, returning a Boolean true or false:
                       return words.some(function (word) {
                           return data.indexOf(word) > -1;
                       });
                   }).show();
                }

                if(search == ''){
                    $('.gallery').show();
                }

        });

• javascript
• jquery

Share Improve this question Follow asked Jan 26, 2015 at 15:53 SashaSasha 8,7252424 gold badges9898 silver badges181181 bronze badges 5

• 1 so whats you're actual question? – indubitablee Commented Jan 26, 2015 at 15:55
• Why not just use a library for this? I believe you are re-inventing the wheel here and while some of your implementation may be made to work it is probably not going to be as efficient as a long standing open source project. – Travis J Commented Jan 26, 2015 at 15:55
• @indubitablee - The search only does OR and not AND. – Travis J Commented Jan 26, 2015 at 15:58
• i understand u correct? when you type 2 words you want only elements having both words in the list? – micha Commented Jan 26, 2015 at 16:16
• Yes, that is what I want, and at the moment that is not the case. – Sasha Commented Jan 26, 2015 at 16:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

return  words.reduce(function(previousValue, currentValue, index, array) {
                    return previousValue &&  data.indexOf(currentValue) > -1;
                     },true);

http://jsfiddle/911hx0bd/5/

the true at the end is the init value which is the previousValue of the first value in the array

I am trying to create filtering function where user can start typing text in the input box and the function will show/hide data as the user is typing. Also it needs to bine two or more words, but only to show the results which have that bination of words, and not to show data where the words can be found (as the function is working at the moment). I am trying to create this some time and I am out of ideas what to do.

This is the last working code (JS Fiddle demo):

HTML:

<div class="gallery-search">
    <input type="text" name="input-filter" class=form-control id="input-filter" placeholder="Search Here">
</div>
<div>  
    <a class="gallery"  data-tags="chaos board nordic viking warriors display ship dock warhammer fantasy"></a>
    <a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery gaming board wasteland warhammer 40k"></a>
    <a class="gallery" data-tags="modular nurgle imperial chaos gaming board toxic crossroad warhammer 40k"></a>
    <a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery warhammer 40k"></a>
    <a class="gallery" data-tags="ork orc fort fortress modular palisade wood skaven scenery warhammer fantasy"></a>   
</div>

JS:

var inputFilter = $('#input-filter');
inputFilter.on('keyup', function() {

            var
                $this  = $(this),
                search = $this.val().toLowerCase(),
                words = search.split(/\s+/),
                data;

                if(search.length > 2){
                    $('.gallery').hide();
                    $('a[data-tags]').filter(function(){
                       // splitting the data-tags attribute to an array of words:
                       data = this.dataset.tags.split(/\s+/);

                       // looking to see if any of the words (from the value)
                       // are present in the array formed from the data-tags
                       // attribute, using Array.prototype.some() to iterate
                       // over the given array, returning a Boolean true or false:
                       return words.some(function (word) {
                           return data.indexOf(word) > -1;
                       });
                   }).show();
                }

                if(search == ''){
                    $('.gallery').show();
                }

        });

I am trying to create filtering function where user can start typing text in the input box and the function will show/hide data as the user is typing. Also it needs to bine two or more words, but only to show the results which have that bination of words, and not to show data where the words can be found (as the function is working at the moment). I am trying to create this some time and I am out of ideas what to do.

This is the last working code (JS Fiddle demo):

HTML:

<div class="gallery-search">
    <input type="text" name="input-filter" class=form-control id="input-filter" placeholder="Search Here">
</div>
<div>  
    <a class="gallery"  data-tags="chaos board nordic viking warriors display ship dock warhammer fantasy"></a>
    <a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery gaming board wasteland warhammer 40k"></a>
    <a class="gallery" data-tags="modular nurgle imperial chaos gaming board toxic crossroad warhammer 40k"></a>
    <a class="gallery" data-tags="modular necron obelisk pyramid ziggurat scenery warhammer 40k"></a>
    <a class="gallery" data-tags="ork orc fort fortress modular palisade wood skaven scenery warhammer fantasy"></a>   
</div>

JS:

var inputFilter = $('#input-filter');
inputFilter.on('keyup', function() {

            var
                $this  = $(this),
                search = $this.val().toLowerCase(),
                words = search.split(/\s+/),
                data;

                if(search.length > 2){
                    $('.gallery').hide();
                    $('a[data-tags]').filter(function(){
                       // splitting the data-tags attribute to an array of words:
                       data = this.dataset.tags.split(/\s+/);

                       // looking to see if any of the words (from the value)
                       // are present in the array formed from the data-tags
                       // attribute, using Array.prototype.some() to iterate
                       // over the given array, returning a Boolean true or false:
                       return words.some(function (word) {
                           return data.indexOf(word) > -1;
                       });
                   }).show();
                }

                if(search == ''){
                    $('.gallery').show();
                }

        });

• javascript
• jquery

Share Improve this question Follow asked Jan 26, 2015 at 15:53 SashaSasha 8,7252424 gold badges9898 silver badges181181 bronze badges 5

• 1 so whats you're actual question? – indubitablee Commented Jan 26, 2015 at 15:55
• Why not just use a library for this? I believe you are re-inventing the wheel here and while some of your implementation may be made to work it is probably not going to be as efficient as a long standing open source project. – Travis J Commented Jan 26, 2015 at 15:55
• @indubitablee - The search only does OR and not AND. – Travis J Commented Jan 26, 2015 at 15:58
• i understand u correct? when you type 2 words you want only elements having both words in the list? – micha Commented Jan 26, 2015 at 16:16
• Yes, that is what I want, and at the moment that is not the case. – Sasha Commented Jan 26, 2015 at 16:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

return  words.reduce(function(previousValue, currentValue, index, array) {
                    return previousValue &&  data.indexOf(currentValue) > -1;
                     },true);

http://jsfiddle/911hx0bd/5/

the true at the end is the init value which is the previousValue of the first value in the array

本文标签： jqueryJavascriptfiltering data with text input boxStack Overflow