多个搜索框搜索自动匹配

图片说明

index.html

 <!DOCTYPE HTML>
<html>
<head>
<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> 
</head>
<body>
<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>
</body>
</html>

zi.js


$(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++;  
}

sspp.js

 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); 
}

当你在第二个或以后的商品输入框选择商品型号时，要记录事件源（记录用户是点击了哪一个商品型号框，然后把选择的值赋给对应的事件源）；