在搜索框中输入键时发出 Ajax 获取请求

Question

我正在尝试在我的 Django 应用程序中创建一个实时搜索框。一般的想法是，当在搜索字段中按下一个键时，它应该将获取请求发送到我的服务器，并且在成功时，数据应该附加到我的搜索结果 p 标记。但是，出于某种原因，我要附加我的整个 HTML 内容。我只想附加在搜索框中发送的信息。

这是我目前所拥有的。

HTML

 <form method="get" action="{% url 'sell' %}" class="search_form center-block">
                    <!--{% csrf_token %}-->
                    <div class="input-group search_option">
                      <input type="text" id="searchBox" class="search_field form-control" name="q" placeholder="Search for...">
                        <span class="input-group-btn">
                            <input id="search" class="search_submit btn btn-default" onclick="myFunction()" type="submit" value="Search">
                        </span>
           </div><!-- /input-group -->
</form>

脚本

$(document).ready(function(){
          $('.search_field').keyup(function(){
              $.ajax({
                  url: "{% url 'sell' %}",
                  type: "GET",
                  cache: false,
                  data: { 'search_text' : $('.search_field').val() },
                  success: function(data){
                    $('#search-results').append(data);
                  }
              });
          });
        });

我相信数据是我试图从 search_field 输入中获取值的地方，但出于某种原因。这是行不通的。

提前感谢您的帮助

Answer 1

刚刚呢：

``` $(document).ready(function(){

      $('.search_field').keyup(function(){
          var data = $('.search_field').val(); 
          $.ajax({
              url: "{% url 'sell' %}",
              type: "GET",
              cache: false,
              data: data,
              success: function(data){
                $('#search-results').append(data);
              }
          });
      });
    });

```

Answer 2

您可以尝试对搜索框使用 select2 控件 https://select2.github.io/

使用 CDN 参考

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

html:

<select id="searchBox"></select>

js:

$("#searchBox").select2({
    ajax: {
        url: "{% url 'sell' %}",
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        delay: 250,
        method: "GET",
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {
            // parse the results into the format expected by Select2
            // since we are using custom formatting functions we do not need to
            // alter the remote JSON data, except to indicate that infinite
            // scrolling can be used
            //params.page = params.page || 1;
            params.page = params.page || 1;

              return {
                results: data.items,
                pagination: {
                  more: (params.page * 30) < data.total_count
                }
              };
            },
            cache: true
    },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: function (data) { return data.text; }, // omitted for brevity, see the source of this page
    templateSelection: function (data, container) { return data.text; } // omitted for brevity, see the source of this page
});

Answer 3

$(document).ready(function(){
          $('.search_field').keyup(function(event){
              $.ajax({
                  url: "{% url 'sell' %}",
                  type: "GET",
                  cache: false,
                  data: { 'search_text' : event.target.value },
                  success: function(data){
                    $('#search-results').append(data);
                  }
              });
          });
        });

Answer 4

data: { 'search_text' : $('#searchBox').val() },

Answer 5

您可以使用 jQuery 自动完成功能来代替 ajax。 Autocomplete

    $("#searchBox").autocomplete({
    source: function (request, response) {
       $.ajax({
           url: "your action",
           type: "GET",
           data: request,
           success: function (data) {
             response($.map(data.listName, function (element,index) { // return a list of map
               return {
                     label: element.Name, // dropdown text
                     value: element.Value,// dropdown value
                     id   : element.nameId // you can declare n number of variable based on your need

                 };
             });
         }
     });
   },
   select: function (event, ui) {
    // you can set the value other element if needed
    var value= ui.item.value;
    var id = ui.item.id;       
}

});

你也可以设置其他选项delay、minLength等

Answer 6

我会使用 id #searchBox 而不是 class。对于 URL，您应该输入它，例如“/items” 希望这会有所帮助