Heim >Web-Frontend >H5-Tutorial >Dynamischer Abgleich von Datenlisten-Eingabefeld und Hintergrunddatenbankdaten

Dynamischer Abgleich von Datenlisten-Eingabefeld und Hintergrunddatenbankdaten

php中世界最好的语言Original: 2018-03-26 16:25:162630Durchsuche

Dieses Mal werde ich Ihnen den dynamischen Abgleich des Datenlisten-Eingabefelds und der Hintergrunddatenbankdaten vorstellen. Was sind die Vorsichtsmaßnahmen für den dynamischen Abgleich des Datenlisten-Eingabefelds und der Hintergrunddatenbankdaten? ist ein praktischer Fall.

Ein aktuelles Projekt beinhaltet eine kleine Funktion. Wenn ein Kunde einen Lieferanten auswählt, ist es aufgrund der großen Anzahl von Lieferanten (ca. 3.000) offensichtlich unrealistisch, direkt ein Dropdown-Feld zu generieren, daher lautet die Lösung Wir planen, die neue Tag-Datenliste in HTML5 zu verwenden, um bei der Eingabe des ersten Buchstabens von Chinesisch/Pinyin automatisch die entsprechenden Ergebnisse einzugeben und eine Datenliste zu generieren datalist löst automatisch das Dropdown-Feld aus, daher ist es bequemer, es zu verwenden als auszuwä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,&#39;&#39;);search(&#39;name&#39;,&#39;bro&#39;,&#39;name&#39;)"  >  
                    <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;  
}

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall gelesen haben Weitere spannende Informationen finden Sie in diesem Artikel. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie Phonegap, um Kontakte zu finden

Zusammenfassung häufiger Ereignisse in Phonegap

Das obige ist der detaillierte Inhalt vonDynamischer Abgleich von Datenlisten-Eingabefeld und Hintergrunddatenbankdaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript html5 html select 事件数据库 phonegap

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der indexeddb-DatenbankNächster Artikel：Detaillierte Erläuterung der Verwendung der indexeddb-Datenbank

In Verbindung stehende Artikel

Mehr sehen