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