js implements real-time search and real-time matching of drop-down box with search function_javascript skills

1. When each bit of content is entered in the select input box, the option matching the content is found in the option and displayed in the previous options of the option.
2. How to get the content of each input and trigger the function when keyup is performed.
Question: Can I enter content in the select tag? (Solution: Another article with selectable and input drop-down list box)
3. How to get the content in the input box? (To solve, add the onkeyup time-triggered function to the input box and use js to obtain it)
4. How to match? (Solution)
4.1 How to get the contents of all options? (Solution)

Copy code The code is as follows:

function getSelectText()
{
//Get all select tags
var object = document.getElementsByTagName('select');
//Because there is only one select tag in the html, it is the tag represented by name = "aabb"
var obj = object[0];
//alert(obj.length);
//alert(obj[0]);
//Save the values ​​of all options
var allText;
for(i=0;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 The code is as follows:

var allText = getSelectText();
//alert(allText);
// Split the content of each option
var eachOptin = new Array();
eachOptin=allText.split(","); //Character splitting

4.3 How to match in js?

Copy code The code is as follows:

//If there is input content in the option content, return The position of the first match (greater than or equal to 0), if there is no match, return -1
var flag = eachOptin[i].indexOf(shuru) ;

5. How to match The content of the option is displayed in front of the option? (By changing the index number of the option) (Solution)
Method: When a matching option is found, add the first option back to the end of the select, and then reset the first value to the matching one. option value, and then delete the original matching option
7. js implements the function of the triangle on the right side of the select tag (unsolved, after searching, all options are directly displayed for selection)
8. In the matching option A bedbug appears when there are multiple options. Pay attention to testing and re-modify it. It should be the logical problem in the fifth item above.
The code is as follows:

Copy the code The code is as follows:

<script> <BR>function onku() <BR>{ <BR>/ /Get the content of the input box <BR>var shuru = document.getElementById('ccdd').value; <BR>var object = document.getElementsByTagName('select'); <BR>var obj = object[0]; <BR>//If the input content is empty, all options match <BR>if(shuru!= '') <BR>{ <BR>//alert(shuru); <BR>//Getting option <BR>var allText = getSelectText(); <BR>//alert(allText); <BR>//The content of each option is divided <BR>var eachOptin = new Array(); <BR> eachOptin=allText.split(","); //Character split<BR>var f = 1; <BR>for (i=1;i<eachOptin.length-1;i) <BR>{ <BR>/ /alert(eachOptin[i]); <BR>//If there is input content in the option content, return the first matching position (greater than or equal to 0), if there is no match, return -1 <BR>var flag = eachOptin[i].indexOf(shuru) ; <BR>if(flag >=0) <BR>{ <BR>//alert(i); <BR>//Add the option with index f again , displayed at the end <BR>obj.options.add(new Option(obj[i].innerText,obj[f].value)); <BR>//Reassign the option numbered f to meet the conditions The first option <BR>obj.options[f]=new Option(eachOptin[i],eachOptin[i]); <BR>//Delete the initially existing eligible option <BR>obj.remove(i ); <BR>f ; <BR>} <BR>} <BR>} <BR>} <BR>function getSelectText() <BR>{ <BR>//Get all select tags <BR>var object = document .getElementsByTagName('select'); <BR>//Because there is only one select tag in the html, it is the tag represented by name = "aabb" <BR>var obj = object[0]; <BR>//alert( obj.length); <BR>//alert(obj[0]); <BR>//Save the values ​​of all options<BR>var allText; <BR>for(i=0;i<obj.length;i ) <BR>{ <BR>//alert(obj[i].index);//Get the index number of option<BR>//alert(obj[i].value);//Get the value of option’s value <BR>allText = obj[i].innerText ','; //The key is to obtain the option text through the innerText property of the option object<BR>} <BR>return allText; <BR>} <BR></script>> ;




onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
--Please select--
Beijing
< ;option value="Shanghai">Shanghai
Guangzhou
上123< ;/option>
Suzhou




< ;/span>

Pay attention to the comments in the code
The results of the above code are as follows: