javascript - JQuery 自动完成，并在字段内提供提示

Question

我想创建一个带有下拉 URL 和提示的搜索字段，如下所示:

我创建了一个自动完成表单，但无法理解如何在右侧制作提示。我的代码:

HTML:

<form id="myForm" >
  <div class="search">
    <input type="search" name="search" placeholder="Input..." required id="autocomplete">
    <input type="submit" value="Search" >
  </div>
</form>

JQuery

$(function() {
  var availableUrls = [
    "https://google.com",
    "stack.com",
    "google.com"
  ];
  $( "#autocomplete" ).autocomplete({ 
    source: availableUrls
  });
});

请帮助我了解如何在下拉字段中创建提示，如何创建标记为红色的提示部分:

Answer 1

这是一个展示自动完成功能的工作示例。希望能帮助到你。

$(function() {
  //the the autocomplete matches the word and gives us the related options
  var availableUrls = [
    
    "a",
    "ab",
    "abc",
    "abcd",
    "abcde"
  ];
  $( "#autocomplete" ).autocomplete({ 
    source: availableUrls
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
 <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<form id="myForm" >
  <div class="search">
    <input type="search" name="search" placeholder="Input..." required id="autocomplete">
    <input type="submit" value="Search" >
  </div>
</form>

https://jqueryui.com/autocomplete/这是另一个自动完成简单示例。

展示如何在自动完成中显示选项的另一个示例 https://jqueryui.com/autocomplete/#custom-data