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

Posted 2023-02-25

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

【英文标题】：Replace the text in an input text box with text from a selected autocomplete option

【发布时间】：2020-07-04 22:09:37

【问题描述】：

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

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

这里是包含 html、CSS 和 javascript 的代码的链接：https://jsfiddle.net/qckyu5e6/

【参考方案1】：

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

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

【参考方案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);

【讨论】：

这是我的情况的正确答案，点击功能上的 urlnamelinkAS 是必要的。谢谢！