| <title> List Filter </title> <script type= "Text/javascript" src= "Jquery19.js" ></script>
<script type= "Text/javascript" ></script>
<script type= "Text/javascript" >
function Filteroption (root) {//Initialize list, parameter is list ID
var Tempul;
Tempul = $ ("#" + root). Clone (True);
Tempul.children (). each (function () {
var Htmword = $ (this). html ();
var Pyword = $ (this). Topinyin ();
var supperword = "";
Pyword.replace (/[a-z]/g, function (word) {Supperword + = word});
$ (this). attr ("Mka", (Htmword). toLowerCase ());
$ (this). attr ("MKB", (Pyword). toLowerCase ());
$ (this). attr ("MKC", (Supperword). toLowerCase ());
});
Window[root] = Tempul;
} Filter for list items that match
function resetoption (keys, root) {
Keys = Keys.tolowercase ();
$ ("#" + root). Children (). remove ();
var Duplul = $ (window[root]);
if (keys.length <= 0) {
Duplul.children (). each (function () {
$ ("#" + root). Append ($ (this). Clone (True). Removeattr ("Mka"). Removeattr ("MKB"). Removeattr ("MKC"));
});
Return
}
Duplul.children (' [mka*= ' + keys + ' "],[mkb*= ' + keys + '"],[mkc*= ' + keys + '] '). each (function () {
$ ("#" + root). Append ($ (this). Clone (True). Removeattr ("Mka"). Removeattr ("MKB"). Removeattr ("MKC"));
});
}
</script> <script type= "Text/javascript" >
$ (document). Ready (function () {
Filteroption ("Ullist"); Initialize list, parameter is UL or the ID of select
Filteroption ("Sellist");
});
function Search () {
Resetoption ($.trim ($ ("#txt_search"). Val ()), "ullist"); The method called when searching, the parameter is the keyword content and the ID of the UL or select
}
</script> <body>
Pinyin, initials, Chinese characters: <input type= "text" id= "Txt_search"/>
<input type= "button" id= "Btn_search" onclick= "search ()" value= "Ulsearch"/>
<ul id= "Ullist" >
<li> I'm a girl </li>
<li> I'm a goddess </li>
<li> Lovely girl </li>
<li> last night the rain has been down </li>
<li> only Lonely and lonely accompany me </li>
<li> watch you disappear in my sight </li>
<li> I'll be with you all my lifetime </li>
<li> If there's one more day </li>
<li> God can make me fall in love with you </li>
</ul>
Pinyin, initials, Chinese characters: <input type= "text" id= "Txt_sel_search"/>
<input type= "button" id= "Btn_sel_search" onclick= ' Resetoption ($.trim ("#txt_sel_search"). Val ()), "sellist") ' Value= "Selectsearch"/>
<p>
<select id= "sellist" multiple= "multiple" style= "height:150px"; >
<option> we don't have an extended relationship </option>
<option> only at dawn when the night is mixed </option>
<option> only a short overlapping moment </option>
<option> don't understand the moon's surplus </option>
<option> Black </option> like the day does not know the night
<option> you never know me sad </option>
<option> like the eternal burning sun </option>
<option> don't understand why the stars fall </option>
<option> we still insist on waiting in situ </option>
</select>
</p>
</body>
|
