我想创建一个带有下拉 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
});
});
请帮助我了解如何在下拉字段中创建提示,如何创建标记为红色的提示部分:
最佳答案
这是一个展示自动完成功能的工作示例。希望能帮助到你。
$(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
关于javascript - JQuery 自动完成,并在字段内提供提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39234109/