通过从 li 中选择一个值来自动完成具有多个值的文本框答案

【问题标题】：Autocomplete textbox with multiple values by selecting a value from li通过从 li 中选择一个值来自动完成具有多个值的文本框
【发布时间】：2016-04-01 15:06:35
【问题描述】：

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

<!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>

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

【问题讨论】：

你能发布一个演示吗？
您的 $('#ul3').show() 看起来位置不对。它不应该在$('#ul2 li').click 块中吗？您现在拥有它，无法单击 li 内的 #ul3 元素使其显示。

标签： javascript jquery html

【解决方案1】：

也许这不是您正在等待的答案，但 jQueryUI 包含一个名为“自动完成”的出色组件，它完全符合您的要求。
Here is the doc with code examples.
您可以使用类别、远程数据源、倍数值、可滚动结果列表等。这并不像看起来那么容易（尤其是当您使用 nodejs 和 oracle 进行远程自动完成时，呵呵），但在许多情况下它非常有用。在您的页面中使用少量代码处理所有事件（单击、按键、鼠标滚动等）。

【讨论】：