Javascript 自动完成

我花了三天时间试图完全理解为什么我不能让这个脚本用于键盘导航

搜索、显示和替换都可以正常工作，但当我尝试浏览列表并按Enter键选择一个选项时，却无法正常工作

形式

<form action="/busqueda.php" method="get" autocomplete="off">
   <input name="dataa" class="boxbuscar" type="text" id="despliega" onKeyUp="autocomplet()">
   <input src="/img/btn-buscar.png" type="image" class="lupa">
<ul id="lista"></ul>

有什么想法吗

更新：

---

简短回答：这是一个更好的选项

输入不能自动工作您必须绑定您的功能才能输入关键事件

列表的键盘导航不能像您希望的那样在框外工作。您需要监听列表上的键盘事件并触发相应的操作。尝试以下几点：

$(document).on('keyup', function(e) {
  if (e.which === 38) {
    // Arrow Up is pressed
  }
  if (e.which === 40) {
    // Arrow Down is pressed
  }
  if (e.which === 13) {
    // Enter is pressed
  }
})

然后您需要一个变量，我们称之为current，它存储当前突出显示的列表项。按下向上/向下箭头时，您将更改电流。您还必须向当前列表项添加一些样式，以指示向用户高亮显示的样式。当按下enter键时，只需调用set_itemcurrent-将当前列表项传递给set_item函数

当列表显示/隐藏时，您可能还应该添加/删除此侦听器，以便在列表隐藏时不会在文档中触发此侦听器

这是你的文件。还可以查看一个

总而言之，您最好不要重新发明轮子并使用现成的自动完成小部件。这里是，这里是页面上的搜索Ajax示例，以查看后端服务器的示例实现

这里有一些关于你的代码的建议：

不要在服务器上呈现javascript。从服务器接收列表的最佳方式是接收一个列出所有项目的JSON对象，然后从中构建列表。如果必须返回HTML，请不要将javascript回调放在其中。所以只需返回一个，然后使用$'list li'。单击。。。为所有项目设置侦听器。通过这种方式，您可以使javascript和php尽可能分开

使用英语来命名变量、函数等。总有一天你会向别人展示你的代码，而使用西班牙语的变量名会让非西班牙语使用者很难阅读你的代码

学习使用缩进。适当的缩进使阅读代码和理解正在发生的事情更加容易。这是一本书。对于PHP，您可能也会发现同样的情况。还有一些在线工具可以帮你尝试。我建议在将代码发布到问题中之前对其进行适当的样式设置，这样社区就更容易阅读

---

看起来函数集_itemitem在JS代码中被注释掉了。这可能是原因吗？另外，请您用适当的缩进正确地格式化代码，以便更容易阅读。谢谢。嗯，恐怕我的搜索框不是一个好的解决方案。我明白你说的话。对不起我的缩进我已经尽力了，编辑。JQuery UI是否可以自动完成和/或自动完成从数据库返回数据？因为我看到了两个与MySQL交互的例子，这两个都是javascript小部件。他们生活在前端，并以某种方式与服务器通信。在Awesomplete页面上有一个如何将其与页面上的后端服务器搜索Ajax示例一起使用的示例。您可能需要调整服务器的响应以使其正常工作。JQuery UI Autocomplete基于此示例工作，谢谢jetpackpony@XavierSal。如果它帮助您解决了问题，请您投票并接受我的答案。谢谢升级，但存档，直到我得到15分，接受，非常感谢小马！

function autocomplet() {
var min_length = 2; // min caracters to display the autocomplete
var keyword = $('#despliega').val();
if (keyword.length >= min_length) {
    $.ajax({
        url: 'ajax_refresh.php',
        type: 'POST',
        data: {
            keyword: keyword
        },
        success: function(data) {
            $('#lista').show();
            $('#lista').html(data);
        }
    });
} else {
    $('#lista').hide();
}
}
// set_item : this function will be executed when we select an item function set_item(item) {
// change input value
$('#despliega').val(item);
// hide proposition list    
$('#lista').hide();
}

$(document).on('keyup', function(e) {
  if (e.which === 38) {
    // Arrow Up is pressed
  }
  if (e.which === 40) {
    // Arrow Down is pressed
  }
  if (e.which === 13) {
    // Enter is pressed
  }
})