0
Привет Я пытаюсь разработать текстовое поле автозаполнения с несколькими значениями, разделенными полной остановкой, а приведенный ниже элемент - это мой код.Autocomplete текстовое поле с несколькими значениями, выбирая значение из li
<!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>
он отлично работает, когда я выбираю Америку, но моя проблема здесь, когда я выбираю Европу я не могу получить Ending и доступный, но вместо этого я получаю растительные и материальные элементы в текстовом поле, как, который я разработан.
Можете ли вы опубликовать демо? – DontVoteMeDown
Ваш '$ ('# ul3'). Show()' похоже, что он находится в неправильном месте. Разве это не должно быть в '$ ('# ul2 li'). Нажмите« блок »? Там, где у вас есть это, нет способа щелкнуть по элементу 'li' внутри' # ul3', чтобы он показывался. – DonovanM