Question

我正在尝试在我的Django应用程序中创建一个实时搜索框。一般的想法是，当在搜索字段中按下某个键时，它应该将get请求发送到我的服务器，并且成功时，数据应该附加到我的搜索结果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

只是：

``` $（文件）。就绪（函数（）{

      $('.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

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

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

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

Answer 5

您可以尝试在搜索框中使用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 6

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

}）;

您还可以设置其他选项延迟，minLength等，

在键盘中输入密钥时，使Ajax获取请求

6 个答案: