我试图在表单中进行即时搜索，所以当我开始在"品牌"输入字段中键入时，建议的术语应该出现在下面（来自我有几个品牌名称的数据库）。这是在表单外工作，但不是在表单内。。。
这是表格：
<script id="blockOfStuff" name="blockOfStuff" language="text">
<form name="add_device" enctype="multipart/form-data" action="addproduct.php?add=1" method="POST">
<div id="field">Brand: <input type="text" name="brand"></div>
<input type="submit" value="Save">
</form>
</script>
表单在script标记中，因为我需要在单击按钮时使其可见：
即时搜索是用jQuery这样做的：
<?php
$content ='<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="service.css" type="text/css">
<script type="text/javascript">
$(function() {
$(".search").keyup(function() {
var searchid = $(this).val();
var dataString = ''search=''+ searchid;
if (searchid != '''') {
$.ajax({
type: "POST",
url: "searchbrand.php",
data: dataString,
cache: false,
success: function(html) {
$("#result").html(html);
}
});
}
return false;
});
jQuery("#result").on("click", function(e) {
var $clicked = $(e.target);
var $name = $clicked.find(''.name'').html();
var decoded = $("<div/>").html($name).text(); $(''#searchid'').val(decoded);
});
jQuery(document).on("click", function(e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("search")) {
jQuery("#result").fadeOut();
}
});
$(''#searchid'').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
<input type="text" class="search" id="searchid" placeholder="Cauta brand" />
<div id="result"></div>
';
?>
<?php echo $content; ?> // this works outside the form but not inside...
从数据库读取是在searchbrand.php中进行的，其中的行如下所示：
echo' <div class="show" align="left" >
<img src="http://10i.ro/images/arrow.png" style="height:15px; float:left; margin-right:2px;" /><span class="name">'.$final_brand.'</span>
</div>';
很抱歉我迟到太久了，我需要向你展示所有的联系方式。感谢
热搜的问题在于用户打字时可以发出多少网络请求。在这种情况下，不要试图像谷歌一样，好吧，试着变得更简单。
-
从服务器上获取一些最想要的结果，如果你在服务器端没有太多结果，那么一次带来所有结果。
-
将您以前的请求保存在客户端的1级数组中，如下所示：
["Art", "Baby", "Cat", "Doge"]
- 现在您已经准备好立即显示结果了，请使用客户端的Fuse Search进行搜索
更新：
好的，相反，要在<script>标记中编写需要在页面上动态显示的标记，为什么不在<body>中进行语义编写呢？
如果您将这些概念分开，而不是将标签与脚本混合，则会容易得多：）
看，从语义上讲，将html元素保留在<body>中并始终使用<script>标记来承载脚本是正确的，即使您的标记是由javascript上处理的事件或操作动态创建、更改或删除的。
只需访问您想要修改的dom对象，就可以玩得很开心了！
我希望这些小技巧能对你有所帮助。
问题似乎是包含表单的<script>标记，尽管我不明白为什么。。。我已经将script标记更改为div标记，现在一切都好了
谢谢大家！
您可以使用这个jQuery插件。https://jqueryui.com/autocomplete/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>