Question

我试图在表单中进行即时搜索，所以当我开始输入＆＃34;品牌＆＃34;输入字段，建议条款应显示在下面（从数据库中我有几个品牌名称）。这是在表单之外但不在内部...

以下表格：

<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>

表单位于脚本标记内，因为我需要在按钮点击时显示它：

使用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>';

对不起，我已经很久了，我需要告诉你所有的联系。感谢

Answer 1

热搜索的问题在于用户输入时您可以执行多少网络请求。在这种情况下，不要试图像谷歌一样好，尝试更简单。

从服务器获取一些最想要的结果，如果你在服务器端没有太多结果，那就立刻带上所有结果。
在客户端保存您之前在1级数组中的请求，如下所示：

["Art", "Baby", "Cat", "Doge"]

现在您已准备好立即显示结果，请在客户端使用Fuse Search。

<强>更新

好吧，而不是编写需要在<script>标记内的页面上动态显示的标记，为什么不在<body>内部进行语义编写？

如果将这些概念分开，而不是将标签与脚本混合，则更容易：）

看，在语义上是正确的，将html元素保留在<body>内，并始终使用<script>标记来托管脚本，即使您的标记是由javascript处理的事件或操作动态创建，更改或删除的。

只需访问您想要修改的dom对象并享受乐趣！

我希望这些提示可以帮到你。

Answer 2

似乎问题是包含表单的<script>标签，但我不明白为什么......我已将脚本标签更改为div标签，现在没问题了。
谢谢大家！

Answer 3

您可以使用此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>

如何在表单中显示jQuery内容

3 个答案: