以下是标记。我想要实现的是无论用户在搜索框中输入还是更改单选按钮，都会返回AJAX调用;所以，如果我输入＆＃39; pro＆＃39;然后改为打印机，＆＃39; 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>
答案 0 :(得分：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);
}
});