![](/img/trans.png)
[英]How to Get data from Combo Box and Input it to Text Box with Javascript?
[英]Javascript - filtering data with text input box
我正在嘗試創建過濾功能,用戶可以在其中開始在輸入框中鍵入文本,並且該功能將在用戶鍵入時顯示/隱藏數據。 它還需要組合兩個或更多的單詞,但僅是為了顯示具有單詞組合的結果,而不是顯示可以找到這些單詞的數據(因為該函數目前正在運行)。 我正在嘗試創建一些時間,但是我不知道該怎么做。
這是最后一個工作代碼( JS Fiddle演示 ):
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();
}
});
return words.reduce(function(previousValue, currentValue, index, array) {
return previousValue && data.indexOf(currentValue) > -1;
},true);
http://jsfiddle.net/911hx0bd/5/
最后的true是init值,它是數組中第一個值的previousValue
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.