制作<li>根据输入到文本输入中的文本而出现
[英]Make <li> appear depending on text being typed into text input
问题描述
My goal is to accomplish a feature where a user types in some text into an input field and while they're typing, <li> elements appear below based on what the user's typing in.
我的目标是实现一个功能，用户在输入字段中输入一些文本，当他们输入时， <li>元素会根据用户输入的内容显示在下方。
For example, there's a text input field and the user types in red - the following results would appear:例如，有一个文本输入字段，用户输入红色 - 将出现以下结果：
- red chair红色椅子
- red apple红苹果
- red floor红地板
Or if they typed in blue, the following results would appear:或者，如果他们输入蓝色，则会出现以下结果：
- blue surface蓝色表面
- blue car蓝色汽车
- blue computer蓝色电脑
I currently have this code, however no autocomplete results seem to be appearing:我目前有此代码，但似乎没有出现自动完成结果：
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source :
[ { value: "http://foo.com",
label: "Spencer Kline"
},
{ value: "www.example.com",
label: "James Bond"
},
],
select: function( event, ui ) {
window.location.href = ui.item.value;
}
});
});
</script>
<input type="text" id="autocomplete" style="width: 75%;">
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2015-10-11 13:42:49
You need to include jQuery UI JS , jQuery UI CSS and jQuery libraries.您需要包含jQuery UI JS 、 jQuery UI CSS和jQuery库。
Also, your code needs some change.此外，您的代码需要进行一些更改。 It should look like this:它应该是这样的：
$(document).ready(function() { $("input#autocomplete").autocomplete({ source: [{ value: "www.foo.com", label: "Spencer Kline" }, { value: "www.example.com", label: "James Bond" } ], select: function(event, ui) { window.location.href = ui.item.value; } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <input type="text" id="autocomplete" style="width: 75%;">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.