在文字框輸入關鍵詞可以實現篩選功能程式碼例項

antzone發表於2017-03-17

在實際應用中可能需要這樣的功能，那就是在文字框輸入關鍵字，可以實現響應的過濾功能，這是一種非常人性化的篩選效果，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  margin:0px;
  padding:0px;
}
ul{
  margin:px;
  padding:0px;
  list-style-type:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  done(); 
  onclick(); 
  $("#txt").bind("keyup",function(){ 
    txtchange(0); 
  }); 
}); 
 
function done(){ 
  ularray=[]; 
  var data=[{1:"螞蟻部落"},{2:"螞蟻部落一"},{3:"螞蟻"},{4:"部落"},{5:"小部落"}]; 
 
  var ul=$("#theul"); 
  $.each(data,function(index,item){ 
    var li=$("<li></li>"); 
    $.each(item,function(name,value){ 
      var span=$("<span></span>").html(value); 
      li.append(span); 
      ularray.push(value); 
    }); 
    ul.append(li); 
  }); 
  ularray.sort(); 
}; 
 
function txtchange(flag){ 
  var textObj=$("#txt").val(); 
  var divObj=$("#theul").html(); 
  var array=[]; 
 
  with(divObj){ 
    var ulHTML=divObj.match(/<[^>]*>/)[0];//拿到開始標籤 
    val = ularray+ ""; //轉為字串 
 
    for(var i=0;i<ularray.length;i++){ 
      if(val.split(",")[i].indexOf(textObj)!==-1||flag){ 
        array[array.length] = "<li><span>" + ularray[i] + "</span></li>";
      }; 
    };
 
    var liHtml = ""; 
    $.each(array,function(item,val){ 
      liHtml += val; 
    });
 
    divObj=ulHTML+liHtml+"</ul>";
    $("#theul").html(divObj); 
    onclick();
  }; 
}; 
 
function onclick(){ 
  $("#theul li span").click(function(){ 
    var otxt=$(this).html(); 
    $("#txt").empty().val(otxt); 
  }) 
}
</script>
</head>
 
<body >
<center>
  <form>
    <input id="txt" type="text" />自動提示
    <div id="box">
      <ul id="theul"></ul>
    </div>
  </form>
</center>
</body>
</html>

以上程式碼實現了我們的要求，在文字框輸入關鍵字可以實現篩選功能，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，當文件結構內容完全載入完畢再去執行函式中的程式碼。

2.done()，執行函式。

3.onclick()，執行函式。

4.$("#txt").bind("keyup",function(){txtchange(1)})，為文字框註冊keyup事件處理函式。

5.function done(){}，宣告一個函式，此函式可以將陣列的內容寫入ul元素。

6.ularray=[]，宣告一個陣列，用來儲存陣列中物件直接量的中屬性值。

7.var data=[{1:"螞蟻部落"},{2:"螞蟻部落一"},{3:"螞蟻"},{4:"部落"},{5:"小部落"}]，宣告一個陣列，陣列中的元素是物件直接量，直接量中的屬性值就是在ul中呈現的將要被篩選的元素。

8.var ul=$("#theul")，獲取id屬性值為theul的元素。

9.$.each(data,function(index,item){})，遍歷陣列中的每一個元素。

10.var li=$("<li></li>")，建立一個li元素物件。

11.$.each(item,function(name,value){})，遍歷當前物件直接量中的屬性。

12.var span=$("<span></span>").html(value)，建立一個span元素，並且將物件直接量的屬性值寫入span元素。

13.li.append(span),將span元素追加到li元素中。

14.ularray.push(value)，將屬性值儲存陣列。

15.ul.append(li)，將li元素追加到ul元素。

16.ularray.sort();，給陣列排序。

17.function txtchange(flag){)，此函式實現了篩選功能，作為一個標識，如果是0，則實現篩選功能，如果不是0，則無篩選效果。

18.var textObj=$("#txt").val()，獲取文字框的值。

19.var divObj=$("#theul").html()，獲取ul元素下的html內容。

20. var array=[]，宣告一個陣列，用來儲存篩選後的li元素。

21.with(divObj){}，一個with語句，具體可以參閱相關閱讀相關內容。

22.var ulHTML=divObj.match(/<[^>]*>/)[0]，獲取html內容的第一個html標籤。

23.val = ularray+ ""，將陣列轉換為字串。

24.for(var i=0;i<ularray.length;i++)，遍歷陣列中的每一個元素。

25.if(val.split(",").indexOf(textObj)!==-1||flag){array[array.length]="<li><span>"+ularray+"</span></li>"}，判斷文字框輸入的內容是否包含在被篩選的內容中，不等於-1就是在，且flag為零的時候就進行篩選，將包含輸入內容的li元素新增到陣列array，如果flag為其他值，無論是否在都不進行篩選，會將原來所有的內容新增到陣列。

26.var liHtml = ""，宣告一個變數，並賦值為空字串，用來儲存篩選後的html內容。

27.$.each(array,function(item,val){liHtml += val;})，遍歷陣列中的每一個內容，然後進行字串連線。

28.divObj=ulHTML+liHtml，進行字串連線。

29.$("#theul").html(divObj)，將html內容寫入ul元素。

30.onclick()，重新註冊事件處理函式。

31.function onclick(){}，註冊click事件處理函式。

32.$("#theul li span").click(function(){})，為span元素註冊事件處理函式。

33.var otxt=$(this).html()，獲取點選當前span元素中的內容。

34.$("#txt").empty().val(otxt)，先清空文字框內容，然後在點選有、span元素中的內容寫入文字框。

二.相關閱讀:

1.$.each()函式可以參閱jQuery.each()一章節。

2.push()函式可以參閱javascript push()一章節。

3.append()函式可以參閱jQuery append()一章節。

4.sort()函式可以參閱javascript sort()一章節。 

5.html()函式可以參閱jQuery html()一章節。 

6.match()函式可以參閱正規表示式match()函式一章節。 

7.split()函式可以參閱javascript split()一章節。 

8.indexOf()函式可以參閱javascript indexof()一章節。 

9.empty()函式可以參閱jQuery empty() 一章節。

相關文章