Web Front-end
JS Tutorial
js implements real-time search and real-time matching of drop-down box with search function_javascript skills
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)
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)
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?
//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:
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
php Elasticsearch: How to use dynamic mapping to achieve flexible search functionality?
Sep 13, 2023 am 10:21 AM
PHPElasticsearch: How to use dynamic mapping to achieve flexible search capabilities? Introduction: Search functionality is an integral part of developing modern applications. Elasticsearch is a powerful search and analysis engine that provides rich functionality and flexible data modeling. In this article, we will focus on how to use dynamic mapping to achieve flexible search capabilities. 1. Introduction to dynamic mapping In Elasticsearch, mapping (mapp
HTML, CSS and jQuery: Make a data table with search functionality
Oct 26, 2023 am 10:03 AM
HTML, CSS and jQuery: Make a data table with search function In modern web development, data table is a frequently used element. In order to facilitate users to find and filter data, adding search functions to data tables has become an essential function. This article will introduce how to use HTML, CSS and jQuery to create a data table with search function, and provide specific code examples. 1. HTML structure First, we need to create a basic HTML structure to accommodate the data table
How to develop powerful search capabilities using PHP and Manticore Search
Aug 06, 2023 am 10:13 AM
Overview of how to develop powerful search functionality using PHP and ManticoreSearch: Search functionality plays a vital role in modern application development. In order to achieve efficient and accurate search capabilities, it is crucial to utilize a suitable search engine. ManticoreSearch is a powerful full-text search engine that provides high-performance and scalable search capabilities. This article will introduce how to use PHP and ManticoreSearch to develop powerful search functions, and
How to use PHP to implement a pinyin first letter search function?
Sep 05, 2023 pm 04:10 PM
How to use PHP to implement a pinyin first letter search function? Pinyin first letter search function is very common in many applications, especially in scenarios such as contact lists or product searches. This article will introduce how to use PHP to implement a pinyin first letter search function. The idea of implementing the pinyin initial letter search function is: based on the keywords entered by the user, match the keywords with the pinyin initial letters in the list to filter out the results that meet the conditions. First, we need to prepare a data source, which can be an array or database table. by
How to implement a multi-select drop-down box in Vue
Nov 07, 2023 pm 02:09 PM
How to implement a multi-select drop-down box in Vue. In Vue development, the drop-down box is one of the common form components. Normally, we use radio drop-down boxes to select an option. However, sometimes we need to implement a multi-select drop-down box so that users can select multiple options at the same time. In this article, we will introduce how to implement a multi-select drop-down box in Vue and provide specific code examples. 1. Use the ElementUI component library. ElementUI is a desktop component library based on Vue, which provides a rich UI.
How to implement search function in Vue
Nov 07, 2023 pm 03:45 PM
In the process of implementing front-end functions, search function is a common requirement. As a popular front-end framework, Vue can also support the implementation of search functions well. This article will introduce how to implement the search function in Vue and provide specific code examples. 1. Preparation Before implementing the search function, we need to prepare a data source, that is, some data that needs to be searched. In the example of this article, we use an array containing book information as the data source, in the following format: books:[{
PHP development practice: How to use PHP and MySQL to implement search functions
Jul 02, 2023 pm 08:31 PM
PHP Development Practice: How to Use PHP and MySQL to Implement Search Function Introduction: In modern Internet applications, the search function is one of the most common and important functions. Using PHP and MySQL to implement search functions can provide users with better user experience and data retrieval capabilities. This article will introduce how to use PHP and MySQL to implement search functions and provide corresponding code examples. 1. Create database and tables. First, we need to create a database and create a database in the database to store search related information.
Develop cloud search functions using PHP and Manticore Search
Aug 05, 2023 pm 04:43 PM
Using PHP and ManticoreSearch to develop cloud search functions. With the rapid development of the Internet, users' demand for search engines has become higher and higher. In order to meet user requirements for search functions, it is critical to develop an efficient search engine. This article will introduce how to use PHP and ManticoreSearch to develop cloud search functions, and attach some code examples to help readers better understand. Introduction to ManticoreSearchManticoreS
