ajax-多个搜索框搜索自动匹配

WBOY
发布: 2016-06-02 11:33:01
原创
1178 人浏览过

ajaxjsphp

ajax-多个搜索框搜索自动匹配

index.html

<code> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache">
<title>测试</title>
<script language="javascript" type="text/javascript" src="style/jquery-2.1.1.min.js"></script><script language="javascript" type="text/javascript" src="style/zj.js"></script><script type="text/javascript" src="style/sspp.js"></script> <style type="text/css"> .suggestionsBox { position: relative; left: 30px; margin: 10px 0px 0px 0px; width: 200px; background-color: #212427; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 2px solid #000; color: #fff; } .suggestionList { margin: 0px; padding: 0px; } .suggestionList li { margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; } .suggestionList li:hover { background-color: #659CD8; } </style> <div>    <div>        <form id="wfform" name="wfform" action="dd.php" method="post" onsubmit="return postcheck()">            <div>            <div>             <!--商品列表 -->            <div class="suggestionsBox" id="suggestions" style="display: none;">                          <div class="suggestionList" id="autoSuggestionsList"></div>                 </div>      <!--商品列表 -->                <table id="tab">                      <tr>                        <th>商品型号</th>                        <th>商品数量</th>                        <th>操作</th>                    </tr>                      <tr class="itme">                          <td>
<input class="hq" name="data[name][]" type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();">                        </td>                         <td>
<input type="text" name="data[num][]" size="7">单位(米)</td>                        <td><button name="del">删除</button></td>                      </tr>                  </table>                  <div><input type="button" name="add" value="增加"></div>              </div>        </div>        <div>        <textarea name="" cols='100"' rows="10"></textarea>        </div>        </form>    </div>
</div></code>
登录后复制

zi.js

<code>$(function(){  $(':button[name=add]').click(function(){    insertTr();  })  $('button[name=del]').click(function(){    $(this).parents('tr').remove();  })})var gradeI=1;function insertTr(){      var html='';      html+='<tr class="itme">
<td> <input name="data[name][]" type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();">
</td>';      html+='<td>
<input type="text" name="data[num][]" size="7">单位(米)</td>';      html+='<td><button name="del">删除</button></td>
</tr>';      $('#tab').append(html);      $('button[name=del]').click(function(){          $(this).parents('tr').remove();      })         gradeI++;  }  </code>
登录后复制

sspp.js

<code> var myS=document.getElementsByName("inputString");function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); } else { $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').show(); $('#autoSuggestionsList').html(data); } else {    var myzd="没有这个商品";    $('#suggestions').show(); $('#autoSuggestionsList').html(myzd); }}); } } // lookup function fill(thisValue) { $('#inputString').val(thisValue); setTimeout("$('#suggestions').hide();", 200); } </code>
登录后复制
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板