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

ajaxjsphp

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>