登录  /  注册
首页 > web前端 > H5教程 > 正文

datalist输入框与后台数据库数据的动态匹配

php中世界最好的语言
发布: 2018-03-26 16:25:16
原创
2335人浏览过

这次给大家带来datalist输入框与后台数据库数据的动态匹配,datalist输入框与后台数据库数据的动态匹配的注意事项有哪些,下面就是实战案例,一起来看一下。

最近项目中涉及到一个小功能,客户在选择供应商时,由于供应商数目较多(大概3000个左右),因此直接生成下拉框显然不现实,所以就更换解决方案,打算借助HTML5新增的标签datalist来实现输入中文/拼音首字母时,自动进入数据库模糊查询,并返回相应的结果,生成datalist,由于在输入框中的输入内容发生变化时,datalist会自动触发下拉框,所以使用起来比select更便捷。前端部分代码如下:

Html Code:

nbsp;html>  
  
    
    <title>库存下拉框测试</title>  
    <meta>  
    <meta>  
    <meta>  
    <meta>  
    <meta>  
    <script></script>  
    <script></script>  
    <script></script>  
    <script></script>  
    <script></script>  
    <script></script>   
    
    
    <!--<![endif]-->  
    <p></p>  
    <p></p>  
    <p>  
        </p><p></p><h1>下拉框测试</h1>  
        <p>  
            </p><p>  
                <!-- --------------------------多条件查询--------------------------------------------- -->  
                </p><p>  
                </p><p>测试数据(默认均为d00001):<br>    昆山市大陆配件有限公司     ksdlpjyxgs <br>  
                            亿真企业有限公司                        yzqyyxgs        <br>  
                            泰州市安誊轴皮厂(集团厂)   tzsatzpc(jtc)  
                </p>    
                  
                    按 供应商名动态匹配(中文或者拼音均可):  
                    <input>  
                    <datalist></datalist>   
              
          
       
         
                <!-- -----------------------footer-------------------------- -->  
                <footer></footer>  
登录后复制

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&gt;0)  
        {  
            for (var i =sub.length-1; i&gt;=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=0 ; i--)   
    {  
        listobj.removeChild(sub[i]);    //清空datalist所有的下拉选项   
    }  
    if(JData.length==0)  //没有查询结果  
    {  
        alert("没有符合条件的结果,请重输");  
        inputContent.value="";    //清空input输入框的值  
        return false;  
    }  
    for (var i=0;i<maxlength><p>相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!</p>
<p>推荐阅读:</p>
<p style="text-align: left;"><a href="http://www.php.cn/html5-tutorial-390095.html" target="_blank">怎样使用phonegap查找联系人</a><br></p>
<p style="text-align: left;"><a href="http://www.php.cn/html5-tutorial-390091.html" target="_blank">phonegap的常用事件总结</a><br></p></maxlength>
登录后复制

以上就是datalist输入框与后台数据库数据的动态匹配的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号