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

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

WBOY

Release： 2016-05-16 17:17:21

Original

1884 people have browsed it

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:

test

< ;/span>

Pay attention to the comments in the code
The results of the above code are as follows:
js implements real-time search and real-time matching of drop-down box with search function_javascript skills