Question

您好我正在尝试开发一个自动完成文本框，其中多个值以句号分隔，下面的元素是我的代码。

<!DOCTYPE html>
<html>
<body>
<input type="text" id="txtSearch"  onkeypress="return searchKeyPress(event);" />
<ul id="ul1" style="display:none;">
<li id="America" >Vendor performance</li>
<li id="Europe" >Raw </li>
</ul>
<ul id="ul2" style="display:none;">
<li id="America">Plant</li>
<li id="America">Material</li>
</ul>
<ul id="ul3" style="display:none;">
<li id="Europe">Ending </li>
<li id="Europe">available</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
document.getElementById('txtSearch').onkeypress = function (e) {
    if (e.keyCode === 64 ) {
        $('#ul1').css("display","inline");
        return false;
    }
};
$(document).ready(function(){
var x = "";
$('#ul1 li').click(function(event) 
    { 
    event.preventDefault();
     $('#txtSearch').val($(this).text()+" . ")
    x = $('#txtSearch').val();
     $('#ul1').hide();
     $('#ul2').show();
     $('#ul3').hide();
    });

$('#ul2 li').click(function(){

    $('#txtSearch').val(x+" "+$(this).text())
     $('#ul1').hide();
     $('#ul2').hide();
    })

$('#ul3 li').click(function(){

    $('#txtSearch').val(x+" "+$(this).text())
     $('#ul1').hide();
     $('#ul2').hide();
     $('#ul3').show();
    })
});
</script>
</body>
</html>

当我选择美国时，它工作正常，但我的问题是，当我选择欧洲时，我无法获得结束和可用，但我得到了我设计的文本框中的植物和材料元素。

Answer 1

也许这不是你等待的答案，但jQueryUI包含一个名为＆＃34; autocomplete＆＃34;这正是你正在努力做的事情 Here is the doc with code examples。
你可以使用类别，远程数据源，倍数值，可滚动结果列表等。它不像它看起来那么容易（特别是当你使用nodejs和oracle，huhu进行远程自动完成时），但在很多情况下它＆＃39;非常有用。
处理所有事件（单击，按键，鼠标滚动等），页面中的代码很少。

通过从li中选择值来自动填充具有多个值的文本框

1 个答案: