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

WBOY
Release: 2016-06-02 11:33:01
Original
1179 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template