我有一个文本输入数量不确定的表单,我正在尝试构建一些自动完成功能。用户开始输入'upl_band1'并且bandlookup()构建建议列表。当用户用鼠标点击li时,执行bandfill(),并更新'upl_band1'。
这是表格来源......
<div>
<input id="upl_band1" type="text" onblur="bandhide('upl_band1');" onkeyup="bandlookup(this.value,'upl_band1');" size="25" name="upl_band1" autocomplete="off">
</div>
<div id="upl_band1sug" class="suggestionsBox" style="display: none;">
<img alt="upArrow" style="position: relative; top: -12px; left: 30px;" src="upArrow.png">
<div id="upl_band1auto" class="suggestionList">
<li onclick="bandfill('Cedric Gervais','upl_band1');">Cedric Gervais</li>
<li onclick="bandfill('Cee-Lo Green','upl_band1');">Cee-Lo Green</li>
<li onclick="bandfill('Celine Dion','upl_band1');">Celine Dion</li>
<li onclick="bandfill('Celleste','upl_band1');">Celleste</li>
<li onclick="bandfill('Cerrone','upl_band1');">Cerrone</li>
</div>
</div>
并且bandfill()函数。
function bandfill(thisValue, boxName) {
var s = boxName+"sug";
$("#"+boxName).val(thisValue); // This is the line that isn't working.
$("#"+s).hide();
}
我坚持认为为什么那条线没有像我认为的那样填充'upl_band1'。救命啊!
编辑:我被要求包含bandhide()和bandlookup()。这些工作应该如此。
function bandlookup(bandString, boxName) {
if(bandString.length == 0) {
// Hide the suggestion box.
var s = boxName+"sug";
$("#"+s).hide();
} else {
var su = boxName+"sug";
var suauto = boxName+"auto";
$.post("band.php", {queryString: ""+bandString+"", inputName: ""+boxName+""}, function(data){
if(data.length > 0) {
$("#"+su).show();
$("#"+suauto).html(data);
}
else if(data.length == 0) {
$("#"+su).hide();
}
});
}
} // lookup
function bandhide(boxName) {
var s = boxName+"sug";
$("#"+s).hide();
}