1. When you enter a point in the Select Input box, the option to find the options that match the content is displayed in the option's previous options.
2. How to get the content of each input and trigger the function when KeyUp.
Question: Can I enter content in the Select tag? (Resolve: Another article can be selected and entered the Drop-down list box)
3. How do I get the contents of the input box? (Solve, add the onkeyup time trigger function in the input box to use JS to obtain)
4. How to match? Solution
4.1 How do I get the contents of all option? Solution
Copy Code code as follows:
function Getselecttext ()
{
Get all Select labels
var object = document.getElementsByTagName (' select ');
Because there is only one select tag in the HTML, it is the label of name = "AABB"
var obj = object[0];
alert (obj.length);
Alert (obj[0]);
Save All option values
var Alltext;
for (i=0;i<obj.length;i++)
{
Alltext + = obj[i].innertext+ ', '; The key is to get the option text through the InnerText property of the option object
}
return alltext;
}
4.2 js split string? Solution
Copy Code code as follows:
var alltext = Getselecttext ();
alert (Alltext);
Separate the contents of each option
var eachoptin = new Array ();
Eachoptin=alltext.split (","); Character segmentation
4.3 How to match in JS?
Copy Code code as follows:
Returns the position of the first match (greater than or equal to 0) if there is input in the option content, and returns-1 if there is no match
var flag = Eachoptin[i].indexof (Shuru);
5. How do I get the matching content to appear before option? (resolve) (by changing the index number of option)
Method: When the matching option is found, the first option is added to the select last, then the first value is reset to the value of the matching option, and then the original matching option is deleted.
7. js to implement the Select Tag right triangle function (unresolved, when the search, directly show all option options)
8. When there are multiple options in the matching option, Bedug, pay attention to the test, and revise, should be the logical problem in the fifth above
The code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Testing </title>
<script>
function Onku ()
{
Get the contents of the Input entry box
var Shuru = document.getElementById (' CCDD '). Value;
var object = document.getElementsByTagName (' select ');
var obj = object[0];
If the input is empty, all options match
if (shuru!= ')
{
alert (Shuru);
Get all of the content in option
var alltext = Getselecttext ();
alert (Alltext);
Separate the contents of each option
var eachoptin = new Array ();
Eachoptin=alltext.split (","); Character segmentation
var f = 1;
for (i=1;i<eachoptin.length-1; i++)
{
Alert (Eachoptin[i]);
Returns the position of the first match (greater than or equal to 0) if there is input in the option content, and returns-1 if there is no match
var flag = Eachoptin[i].indexof (Shuru);
if (flag >=0)
{
alert (i);
Add the option to index F again, showing the last
Obj.options.add (New Option (Obj[i].innertext,obj[f].value));
Assign a value of option number F to the first option that meets the criteria
Obj.options[f]=new Option (Eachoptin[i],eachoptin[i]);
Deletes the initially qualified option that exists
Obj.remove (i);
f++;
}
}
}
}
function Getselecttext ()
{
Get all Select labels
var object = document.getElementsByTagName (' select ');
Because there is only one select tag in the HTML, it is the label of name = "AABB"
var obj = object[0];
alert (obj.length);
Alert (obj[0]);
Save All option values
var Alltext;
for (i=0;i<obj.length;i++)
{
alert (obj[i].index);//Get the index number of option
alert (obj[i].value);//Get the value of option value
alltext+= obj[i].innertext+ ', '; The key is to get the option text through the InnerText property of the option object
}
return alltext;
}
</script>
<body>
<span style= "position:absolute;border:1pt solid #c1c1c1; Overflow:hidden;width:188px;height:19px;clip:rect ( -1px 190px 190px 170px); " >
<select name= "Aabb" id= "Aabb" style= "width:190px;height:20px;margin:-2px";
Onchange= "Javascript:document.getElementById (' CCDD '). Value=document.getelementbyid (' Aabb '). options[ document.getElementById (' Aabb '). Selectedindex].value; " >
<option value= "" style= "color: #c2c2c2;" >--Please select--</option>
<option value= "Beijing" > Beijing </option>
<option value= "Shanghai" > Shanghai </option>
<option value= "guangzhou" > Guangzhou </option>
<option value= "Shang 123" > on 123</option>
<option value= "Suzhou" > Suzhou </option>
</select>
</span>
<span style= "Position:absolute; border:1pt solid #c1c1c1; border-left:1pt solid #c1c1c1; border-bottom:1pt solid #c1c1c1; width:170px;height:19px; " >
<input type= "text" name= "CCDD" id= "CCDD" can optionally be entered into the dropdown box "value=" style=; "width:170px;height:15px;border:0pt "Onku ()" >
</span>
</body>
Note the comments in the code
The results of the above code run as follows:
