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

Autocomplete textbox with multiple values by selecting a value from li

本文关键字：文本 选择 li 一个      更新时间：2023-11-10

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

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

当我选择美国时效果很好，但我的问题是，当我选择欧洲时，我无法获得结局和可用的，但我在文本框中获得了我设计的植物和材料元素。

也许这不是你正在等待的答案，但jQueryUI包含一个名为"自动完成"的伟大组件，它可以准确地完成你想要做的事情。
这是带有代码示例的文档
您可以使用类别、远程数据源、多个值、可滚动结果列表等。这并不像看上去那么容易（尤其是当您使用nodejs和oracle、huhu进行远程自动完成时），但在许多情况下它非常有用
所有事件（点击、按键、鼠标滚动等）都只需页面中的少量代码即可处理。

相关文章：