基于keydown和更改的jQuery AJAX调用？

Question

以下是标记。我想要实现的是，无论用户在搜索框中键入还是更改单选按钮，都会返回 AJAX 调用；因此，如果我输入“pro”然后更改为“printer”，AJAX 应该会触发。现在，它不是，但我在控制台日志中也没有收到任何错误。

有人对如何实现这一点有任何想法吗？

使用建议的更改更新了代码；仍然没有实现单选按钮更改功能。

<div id="products_page_wrapper">
<div id="products_page_inner_wrapper">
<script>
  $(document).ready(function(){

    function searchCheck(evt) {

      var val = $("input[name=search_method]:checked").val();
      var search_type = $("input[name=search_method]:checked").val();

      // if printer is selected
      if (val == 'Printer') {

        $( '#product_search' ).autocomplete({source:'controllers/product_Autocomplete_Search.php?search_type='+search_type, minLength:2})
        .data( "autocomplete" )._renderItem = function( ul, item ) {
          return $( "<li></li>" )
          .data( "item.autocomplete", item )
          .append("<a>" + item.label+ "</a>")
          .appendTo( ul );
        };

    }else{

      $('#product_search').autocomplete({
          minLength:2,
          source: function (request, response) {
            $.ajax({
              url: 'controllers/product_Autocomplete_Search.php',
              dataType: 'json',
              data: {
                searchtype: search_type,
                term: request.term
              },
              success: function (data) {
                response($.map(data, function (item) {
                  return {
                    label: item.label,
                    cartridge_id: item.cartridge_id,
                    description: item.description,
                    json: item,
                  }
                }))
              }
            });
          },
          select: function( event, ui ) {
            window.location.href = '?view=view_product_detail&id='+ui.item.cartridge_id;
          }}).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append("<a>" + "<TABLE><TR><TD valign='middle'><img height='60px' src='display/img/products/"+item.label+"_tn.jpg' /></TD><TD valign='middle'>   " + item.description+ "</TD></TR</TABLE></a>")
            .appendTo( ul );
          };
        } 
      };

    $('#product_search').keydown(searchCheck);

    // Doesn't work:
    // $('input[name="search_method"]:radio').on('change', searchCheck);

    // Doesn't work:
    // $("#search_method_one, #search_method_two").on('change', searchCheck);

    // Doesn't work:
    //$("input[name=search_method]:radio").change(searchCheck);

    //searchCheck();

  });

</script>
<form action="<?php echo $site_Config_Url; ?>controllers/product_Search_Process.Controllers.php" method="get">
      <div style="padding-bottom:20px;margin-left:auto;margin-right:auto;margin-top:20px;
">
            <h1 style="color:#fff;padding:0;margin:0;text-align:center;font-family: 'Arvo', serif;font-size:64px;padding-bottom:15px;border-bottom:5px solid #111;line-height:64px;"><span style="font-weight:normal;">Buy Local.</span> <span style="color:#9acf78;">Save Money!</span></h1>
            <div class="clear"></div>
            <div id="main_search_wrap">
                  <div style="padding-left:0px;width:400px;height:108px;float:left;">
                        <h2 style="margin-bottom:7px;color:#fff;text-align:right;padding:10px;">Search by Printer Brand</h2>
                        <div style="width:400px;padding-left:20px;float:left;">
                              <div style="float:left;">
                                    <select name="drop_1" id="drop_1" style="width:300px;">
                                          <option value="" selected="selected" disabled="disabled">Select Printer Brand</option>
                                          <?php getTierOne(); ?>
                                    </select>
                              </div>
                              <div style="width:80px;padding-left:5px;padding-top:5px;float:left;">
                                    <span id="wait_1">
                                          <img alt="Please Wait" src="<?php echo $site_Config_Url; ?>display/img/ui/ajax-loader.gif"/>
                                    </span>
                              </div>
                              <div class="clear"></div>
                        </div>
                        <div class="clear"></div>

                        <span id="result_1" style="display: none;"></span>
                        <span id="result_2" style="display: none;"></span>

                  </div>
                  <div style="width:100px;height:115px;float:left;margin-left:50px;margin-right:50px;">
                        <h3 style="font-size:48px;padding-top:30px;color:#555;text-align:center;">OR</h3>          
                  </div>
                  <div style="width:400px;height:115px;float:left;" id="searchByBox">
                        <h2 style="margin-bottom:7px;color:#fff;padding:10px;">Search by Cartridge or Printer</h2>
                        <div class="clear"></div>
                        <div style="padding-left:10px;;">
                              <span style="padding-left:10px;color:#ddd"><input type="radio" id="search_method_one" name="search_method" value="Cartridge" checked="true">Cartridge</span>
                              <span style="padding-left:20px;color:#ddd"><input type="radio" id="search_method_two" name="search_method" value="Printer">Printer</span>
                              <div class="clear"></div>
                              <div style="padding-top:5px;">
                                    <div style="padding-top:5px;float:left;">
                                          <input id="product_search" type="text" name="search_text" style="float:left;width:230px;"/>
                                    </div>
                                              <div id="tester"></div>
                                    <div style="padding-left:18px;float:left;">
                                          <input id="submit_right" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" type="submit" name="submit_right" value="Find + SAVE!" />
                                    </div>
                                    <div class="clear"></div>
                              </div>
                        </div><div class="clear"></div>
                  </div><div class="clear"></div>
            </div>
      </div>
</form>
<div class="clear"></div>

Answer 1

您是否尝试通过使用 Firebug 设置一些断点来逐步执行每一行？另外，您提到 AJAX 调用应该可以正常工作，但是您是否检查过是否可以在您的 Web 调试工具（例如 Firebug、Fiddler、Wireshark）中看到返回 HTTP 响应代码 200 的请求？

您是否尝试过使用 "$.ajax()" 的 'error' 参数？例如，

        $.ajax({
            url: 'https://somesite.com/someurl',
            dataType: "json",
            data: {
                SearchTerm: request.term
            },
            success: function (data) {
                var parsed = JSON.parse(data);

                parsed.forEach(function (entry) {
                    //do something
                });

                response(something);
            },
            error: function (message) {
                console.log('Error: ' + message);
                response('Error: ' + message);
            }
        });