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
1846 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)
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; }
var allText = getSelectText(); //alert(allText); // Split the content of each option var eachOptin = new Array(); eachOptin=allText.split(","); //Character splitting
//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:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn