Question

它已经有3天时间试图完全理解为什么我不能使这个脚本功能用于键盘导航。

搜索，显示和替换工作正常，但是当我尝试浏览列表并按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>

PHP

<?php
function connect()
{
return new PDO('mysql:host=localhost;dbname=dbname', 'dbuser', 'dbuserpw', array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
}
$pdo = connect();
$keyword = '%' . $_POST['keyword'] . '%';
$sql = "SELECT * FROM tbl_productos WHERE nombre LIKE (:keyword) ORDER BY nombre ASC LIMIT 0, 15";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, DO ::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach($list as $rs)
{

// put in bold the written text

$reemplazador = str_replace($_POST['keyword'], '<b>' . $_POST['keyword'] . '</b>', $rs['nombre']);

// add new option

echo '<li onclick="set_item(\'' . str_replace("'", "\'", $rs['nombre']) . '\')">' . $reemplazador . '</li>';
}
?>

和JS

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();
}

有什么想法吗？

更新：简短回答：这是一个更好的选择a link

Answer 1

enter不会自动运行你必须绑定你的功能才能输入关键事件

Answer 2

列表的键盘导航不能像您希望的那样开箱即用。您需要侦听列表中的键盘事件并触发相应的操作。尝试以下方面：

$(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，它存储当前突出显示的列表项。按下向上/向下箭头时，您将更改current。您还必须向当前列表项添加一些样式，以指示向用户突出显示哪个样式。按Enter键后，您只需调用set_item(current) - 将当前列表项传递给set_item函数。

当列表显示/隐藏时，您也应该添加/删除此侦听器，因此在隐藏列表时不会触发文档。

以下是JQuery keyup event的文档。另请查看tutorial on JavaScript keyboard events。

所有人都说，你可能最好不要重新发明轮子并使用现成的自动完成小部件。这是JQuery UI Autocomplete，这里是Awesomplete（在页面上搜索“Ajax示例”以查看后端服务器的示例实现）。

P.S。以下是有关您的代码的一些建议：

不要在服务器上呈现javascript。从服务器接收列表的最佳方法是接收列出所有项目的JSON对象，然后构建列表。如果你必须返回HTML，不要在其中放入javascript回调。因此，只需返回<li data-item='1'>One</li>，然后使用$('#list li').on('click', ...为所有项设置侦听器。这样你就可以保持javascript和php尽可能分开
使用英语命名变量，函数等。有一天，您将向某人显示您的代码，并使用西班牙语的变量名称将使非西班牙语的人很难阅读您的代码
学习使用缩进。适当的缩进使您更容易阅读代码并了解正在发生的事情。这是一个javascript style guide。您也可以为PHP找到相同的东西。还有一些在线工具可以帮你试试this one。我建议在将代码发布到问题之前对代码进行正确设计，以便社区更容易阅读。

Autocomplet（）可选择Li

2 个答案: