Question

我有一个搜索框

                <div id="" class="col-10 pt-2  page-title">
                    <label>
                        <input type="search" id="search" class="form-control form-control-sm " placeholder="Search">
                    </label>
                </div>

我的要求是当我按下任何字符并单击回车按钮时需要进行搜索

var x = document.getElementById("search");
x.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   var search = document.getElementById("search").value;
    console.log(search)
  }
});

这将打印我在控制台中输入的单词。

我正在拨打Ajax电话

     $.ajax({
        dataType: "json",
        url: "{% url 'some url name' %}?limit=10",
        },

这将加载10条记录....

相同的API也可以与搜索一起使用...。在此，我们需要传递一个额外的参数....

     $.ajax({
        dataType: "json",
        url: "{% url 'some urn name' %}?limit=10?q="+seach,
        },

但是在调用url时搜索值变得不确定

如何在第一次加载时使用url =“ {％url'某些url名称'％}？limit = 10”调用相同的Ajax调用，并且如果用户搜索的是url“ {％url'一些名称'％}？limit = 10？q =“ + seach，

Answer 1

在AJAX调用之前而不是在事件侦听器中获取输入的值。

var search = document.getElementById("search").value;
$.ajax({
    dataType: "json",
    url: "{% url 'some urn name' %}?limit=10&q="+encodeURIComponent(search),
    ...
});

此外，您需要使用&而不是?分隔多个查询参数。并且您应该调用encodeURIComponent()以确保搜索字符串在URL中正确编码。

Answer 2

将ajax调用包装在以搜索项作为参数的函数中。
如果搜索词不是空白，则将其添加到正确编码的URL中，否则将其保留。
首次调用时，传递一个空白字符串。
在键入事件中，使用搜索变量作为参数调用该函数。

Answer 3

在构建url之前，只需进行条件检查以确保搜索输入具有值且未定义，类似这样的操作应将其剪切：

function makeApiCall() {
    const searchValue = document.querySelector('#search').value;
    const url = searchValue ? `http://myapi.com?limit=10&q=${searchValue}` : 'http://myapi.com?limit=10';
    
    $.ajax({
      dataType: "json",
      url
    }
  }

使用两个不同的URL呼叫Ajax呼叫

3 个答案: