Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des HTML5-Datalist-Tags und des dynamischen Abgleichs mit Hintergrunddaten
Detaillierte Erläuterung des HTML5-Datalist-Tags und des dynamischen Abgleichs mit Hintergrunddaten
- Y2JOriginal
- 2017-05-22 10:15:492914Durchsuche
HTML5s neue Tag-Datenliste wird automatisch in die Datenbank für Fuzzy-Abfragen eingegeben, wenn der erste Buchstabe von Chinesisch/Pinyin eingegeben wird, und gibt die entsprechenden Ergebnisse zurück, um eine Datenliste zu generieren. Wenn sich der Eingabeinhalt im Eingabefeld ändert, löst die Datenliste automatisch eine aus Dropdown-Frame, die Lösung ist sehr gut. Freunde, die ihn benötigen, können darauf verweisen.
Ein aktuelles Projekt beinhaltet eine kleine Funktion. Aufgrund der großen Anzahl von Lieferanten gibt es viele (ungefähr 3.000), daher ist es offensichtlich unrealistisch, Dropdown-Felder direkt zu generieren. Daher habe ich die Lösung geändert und geplant, die neue Tag-Datenliste in HTML5 zu verwenden, um automatisch Fuzzy in die Datenbank einzugeben Abfrage beim Eingeben des ersten Buchstabens von Chinesisch/Pinyin und Rückgabe des entsprechenden Als Ergebnis wird eine Datenliste generiert. Da die Datenliste automatisch das Dropdown-Feld auslöst, wenn sich der Eingabeinhalt im Eingabefeld ändert, ist die Verwendung bequemer als auswählen. Der Front-End-Code lautet wie folgt:
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;
}[Verwandte Empfehlungen]
1 . Kostenloses HTML-Video-Tutorial
2.Teilen Sie eine super umfassende Zusammenfassung der HTML- und CSS-Wissenspunkte
Bringen Sie Ihnen bei, wie man HTML unter nodejs analysiert
4 So verwenden Sie JSON in HTML. Einführung in DatenanzeigemethodenDas obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des HTML5-Datalist-Tags und des dynamischen Abgleichs mit Hintergrunddaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!