制作<li>根據輸入到文本輸入中的文本而出現
[英]Make <li> appear depending on text being typed into text input
問題描述
我的目標是實現一個功能，用戶在輸入字段中輸入一些文本，當他們輸入時， <li>元素會根據用戶輸入的內容顯示在下方。
例如，有一個文本輸入字段，用戶輸入紅色 - 將出現以下結果：
- 紅色椅子
- 紅蘋果
- 紅地板
或者，如果他們輸入藍色，則會出現以下結果：
- 藍色表面
- 藍色汽車
- 藍色電腦
我目前有此代碼，但似乎沒有出現自動完成結果：
<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
您需要包含jQuery UI JS 、 jQuery UI CSS和jQuery庫。
此外，您的代碼需要進行一些更改。 它應該是這樣的：
$(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.