Dynamic matching of datalist input box and background database data
This time I will bring you the dynamic matching of the datalist input box and the background database data. What are the things to note?The following is a practical case, let's take a look. one time.
A recent project involves a small function. When a customer chooses a supplier, due to the large number of suppliers (about 3,000), it is obviously unrealistic to directly generate a drop-down box, so the solution is changed. We plan to use the new tag datalist in HTML5 to automatically enter the database fuzzy query when entering the first letter of Chinese/Pinyin, and return the corresponding results to generate a datalist. When the input content in the input box changes, the datalist will automatically trigger the drop-down. box, so it is more convenient to use than select. The front-end code is as follows:
Html Code:
<!DOCTYPE html> <html lang="en"> <head id="head"> <title>库存下拉框测试</title> <meta charset="utf-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <script src="../../Common/content/jquery-1.7.2.min.js"type="text/javascript"></script> <script src="../../Common/pages/include.js" class="include" type="text/javascript"></script> <script src="../../Common/js/AjaxJson.js" type="text/javascript"></script> <script src="../../Common/js/Setting.js" type="text/javascript"></script> <script src="../../Common/js/Paging.js" type="text/javascript"></script> <script src="../../Js/warehouseManage/testyy.js" type="text/javascript"></script> </head> <body class=""> <!--<![endif]--> <p class="navbar"></p> <p class="sidebar-nav"></p> <p class="content"> <p class="header"><h1 id="ADU" class="page-title">下拉框测试</h1></p> <p class="container-fluid"> <p class="row-fluid"> <!-- --------------------------多条件查询--------------------------------------------- --> <p class="well" id="searchDemo"> <p>测试数据(默认均为d00001):<br> 昆山市大陆配件有限公司 ksdlpjyxgs <br> 亿真企业有限公司 yzqyyxgs <br> 泰州市安誊轴皮厂(集团厂) tzsatzpc(jtc) </p> </p> 按 供应商名动态匹配(中文或者拼音均可): <input list="bro" id="name" oninput="this.value=this.value.replace(/^ +| +$/g,'');search('name','bro','name')" > <datalist id="bro"></datalist> </p> </p> </p> </body> <!-- -----------------------footer-------------------------- --> <footer class="foot"></footer> </html>
JavaScript Code:
var listobj=null; //datalist对象 var requestItem=null; //后台返回的json数据中所需的key值 var inputContent=null; //input标签对象 /**search()说明: * inputID: input标签的ID * datalistID: datalist标签的ID * itemName: 后台返回的json数据中所需的key值(仅需表格中中文字段的属性名) * */ function search(inputID,datalistID,itemName) { inputContent=document.getElementById(inputID); var datalist=document.getElementById(datalistID); //防止在无输入内容的情况下产生遗留下拉选项 if(inputContent.value.length==0||inputContent.value==" ") { var sub=datalist.childNodes; if(sub.length>0) { for (var i =sub.length-1; i>=0 ; i--) { datalist.removeChild(sub[i]); } } listobj=null; requestItem=null; inputContent.value=null; return false; } //全局变量赋值 listobj=datalist; requestItem=itemName; var data=""; var url=""; if(/^[a-zA-Z]*$/.test(inputContent.value)) { //检测出是拼音首字母 data="type=searchWords¶m="+inputContent.value; //注意:data-----------需要自定义 url=baseurl + "/servlet/ListDemo"; //注意:url-----------需要自定义 sendRequest("post",url,data,getResult); } else if (/^[\u4e00-\u9fa5]*$/.test(inputContent.value)) { //检测出是中文 data="type=searchChinese¶m="+inputContent.value; //注意:data-----------需要自定义 url=baseurl + "/servlet/ListDemo"; //注意:url-----------需要自定义 sendRequest("post",url,data,getResult); } } //填写仓库下拉框 function getResult(result) { var data=result; var JData=eval("(" + data + ")"); var maxlength=10; //注释:maxlength保证过多查询结果下只显示10条 if(JData.length<=10) { maxlength=JData.length; } var sub=listobj.childNodes; for (var i =sub.length-1; i>=0 ; i--) { listobj.removeChild(sub[i]); //清空datalist所有的下拉选项 } if(JData.length==0) //没有查询结果 { alert("没有符合条件的结果,请重输"); inputContent.value=""; //清空input输入框的值 return false; } for (var i=0;i<maxlength;i++) { var obj=document.createElement("option"); var indexobj=JData[i]; if(/^[a-zA-Z]*$/.test(inputContent.value)) { obj.value=indexobj[requestItem]; obj.innerHTML=inputContent.value; } if (/^[\u4e00-\u9fa5]*$/.test(inputContent.value)) { obj.value=indexobj[requestItem]; } listobj.appendChild(obj); } var suffix=document.createElement("option"); suffix.value=" "; suffix.innerHTML="输入更多有关"+inputContent.value+"的信息"; listobj.appendChild(suffix); return false; }
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!
Recommended reading:
How to use phonegap to find contacts
Summary of common events in phonegap
The above is the detailed content of Dynamic matching of datalist input box and background database data. For more information, please follow other related articles on the PHP Chinese website!

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











Recently, the military circle has been overwhelmed by the news: US military fighter jets can now complete fully automatic air combat using AI. Yes, just recently, the US military’s AI fighter jet was made public for the first time and the mystery was unveiled. The full name of this fighter is the Variable Stability Simulator Test Aircraft (VISTA). It was personally flown by the Secretary of the US Air Force to simulate a one-on-one air battle. On May 2, U.S. Air Force Secretary Frank Kendall took off in an X-62AVISTA at Edwards Air Force Base. Note that during the one-hour flight, all flight actions were completed autonomously by AI! Kendall said - "For the past few decades, we have been thinking about the unlimited potential of autonomous air-to-air combat, but it has always seemed out of reach." However now,

Last week, amid the internal wave of resignations and external criticism, OpenAI was plagued by internal and external troubles: - The infringement of the widow sister sparked global heated discussions - Employees signing "overlord clauses" were exposed one after another - Netizens listed Ultraman's "seven deadly sins" Rumors refuting: According to leaked information and documents obtained by Vox, OpenAI’s senior leadership, including Altman, was well aware of these equity recovery provisions and signed off on them. In addition, there is a serious and urgent issue facing OpenAI - AI safety. The recent departures of five security-related employees, including two of its most prominent employees, and the dissolution of the "Super Alignment" team have once again put OpenAI's security issues in the spotlight. Fortune magazine reported that OpenA

Apple's latest releases of iOS18, iPadOS18 and macOS Sequoia systems have added an important feature to the Photos application, designed to help users easily recover photos and videos lost or damaged due to various reasons. The new feature introduces an album called "Recovered" in the Tools section of the Photos app that will automatically appear when a user has pictures or videos on their device that are not part of their photo library. The emergence of the "Recovered" album provides a solution for photos and videos lost due to database corruption, the camera application not saving to the photo library correctly, or a third-party application managing the photo library. Users only need a few simple steps

How to use MySQLi to establish a database connection in PHP: Include MySQLi extension (require_once) Create connection function (functionconnect_to_db) Call connection function ($conn=connect_to_db()) Execute query ($result=$conn->query()) Close connection ( $conn->close())

To handle database connection errors in PHP, you can use the following steps: Use mysqli_connect_errno() to obtain the error code. Use mysqli_connect_error() to get the error message. By capturing and logging these error messages, database connection issues can be easily identified and resolved, ensuring the smooth running of your application.

70B model, 1000 tokens can be generated in seconds, which translates into nearly 4000 characters! The researchers fine-tuned Llama3 and introduced an acceleration algorithm. Compared with the native version, the speed is 13 times faster! Not only is it fast, its performance on code rewriting tasks even surpasses GPT-4o. This achievement comes from anysphere, the team behind the popular AI programming artifact Cursor, and OpenAI also participated in the investment. You must know that on Groq, a well-known fast inference acceleration framework, the inference speed of 70BLlama3 is only more than 300 tokens per second. With the speed of Cursor, it can be said that it achieves near-instant complete code file editing. Some people call it a good guy, if you put Curs

According to news on June 26, at the opening ceremony of the 2024 World Mobile Communications Conference Shanghai (MWC Shanghai), China Mobile Chairman Yang Jie delivered a speech. He said that currently, human society is entering the fourth industrial revolution, which is dominated by information and deeply integrated with information and energy, that is, the "digital intelligence revolution", and the formation of new productive forces is accelerating. Yang Jie believes that from the "mechanization revolution" driven by steam engines, to the "electrification revolution" driven by electricity, internal combustion engines, etc., to the "information revolution" driven by computers and the Internet, each round of industrial revolution is based on "information and "Energy" is the main line, bringing productivity development

Using the database callback function in Golang can achieve: executing custom code after the specified database operation is completed. Add custom behavior through separate functions without writing additional code. Callback functions are available for insert, update, delete, and query operations. You must use the sql.Exec, sql.QueryRow, or sql.Query function to use the callback function.
