将输入文本框中的文本替换为所选自动完成选项中的文本

Question

我有一个输入类型文本框，下面有自动完成选项。 使用键盘上的向上和向下箭头，您可以在自动完成选项中移动并“选择”一个，使其变为红色。 如何将输入框中的文本替换为所选选项的文本，这在搜索引擎中很常见？

<input class="searchBox" id="searchBox" name="q" type="text" autocomplete="off" placeholder="hi">

<div class="autoSuggestContainer">
  <span>Select from Menu</span>
    <a>history</a>
    <a>hilton</a>
    <a>hip2save</a>
    <a>hillary clinton</a>
    <a>hickok45</a>
    <a>hitler</a>
    <a>hibiscus</a>
    <a>hipaa</a>
</div>

Here is a link to the code with the HTML, CSS, and Javascript: https://jsfiddle.net/qckyu5e6/

Answer 1

一旦您在上下移动时设置了选定的 class，您就可以使用选定的 class 文本检索锚标记并将其分配给输入标记。 https://jsfiddle.net/b19uv25q/6/

    $("#searchBox").val($(".selected").text());

Answer 2

按照你的小提琴，你会做到这一点

$('.searchBox').val($(".selected").text());

如果你想触发它，你需要添加一个新的案例来处理你的 keyDown 事件的“输入”键以及一个点击事件

document.onkeydown = function (e) {
  e.preventDefault();
  
  switch (e.keyCode) {
    case 38:
      moveUp();
      break;      
    case 40:   
      moveDown();
      break;
    case 13:
      //handle enter key
      setInputText($(".selected").text());
      break;
    }
};

$(".urlnamelinkAS").on("click", function () {
    setInputText($(this).text());
});

function setInputText(text){
    $('.searchBox').val(text);
}