Question

我有这个ajax请求正在努力提取我需要的数据，但我想让这个搜索功能让用户按照要求提取数据。是否可以使用我的工作代码并将其重新用于搜索框？不知道怎么回事......

function foodQuery(){

    var foodURL = "http://api.example.com/items?key=123456789";

    $.ajax({
        url: foodURL,
        type: 'GET',
        contentType: "text/plain",
        dataType: 'json',
        success: function(json) {

            $.each(json.products, function(index, product) { 

                // build product block
                var htmlString = '<div class="product large-3 columns">';
                //open imgwrap
                htmlString += '<div class="imgwrap">';
                //get img src
                htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '@2x.jpg" />';
                // close imgwrap
                htmlString += '</div>';
                // open textwrap
                htmlString += '<div class="textwrap">';
                // get productName
                htmlString += '<h1 class="product_headline">' + product.productName + '</h1>' ;
                // get itemCode
                htmlString += '<h4 class="item_id" >#' + product.itemCode + '</h4>';
                // get description
                htmlString += '<p class="product_desc">' + product.description + '</p>';
                // open price
                htmlString += '<div class="price">';
                // get price & close div
                htmlString += '<span class="dollar"><span class="usd">$</span>' + product.price + '</span> <span class="product_desc">per weight</span></div>'
                // close divs
                htmlString += '</div>';

                //console.log(htmlString);
                $('.listing').append( $(htmlString) );

           }); //end each

        }, // end success
        error: function(e) {
           console.log(e.message);

           $('.listing').append( '<h1 class="errmsg" >Sorry, there was an unkown error.</h1>' );
        } // end error
    }); // end ajax request
}

Answer 1

这取决于您使用的API，但假设API有一种使用文本进行搜索的方法，您可以使用如下所示的内容：

function foodQuery(searchTerm) {
   var foodUrl = '/path/to/api?query=' + searchTerm;

   $.ajax({
     // fill in AJAX call here and callback handling like you are doing
   }) 
}

$('#searchBox').on('keypress', function() {
  foodQuery($(this).val());
});

因此，每次用户输入时，函数foodQuery()都将使用当前搜索词运行。您可能希望添加一些延迟，以便每次用户键入新字符时都不会触发API。

Answer 2

首先创建一个文本输入

<input type="text" id="search">

然后听取该输入的keyup事件。在用户输入时获取输入的值（如果这是您想要的行为）并调用foodQuery函数将输入值作为参数发送。然后将此值用作key的{{1}}参数。然后以与您相同的方式执行foodURL请求。

ajax

如何使用jquery

2 个答案: