If/else语句与使用Ajax的自动完成搜索框结合
问题描述:
我试图实现一个自动完成搜索框,该框根据Javascript中选择的下拉列表项目改变其自动完成文本。但是,使用if/else语句时,我无法使此自动完成功能正常工作。我已为我下面的代码:If/else语句与使用Ajax的自动完成搜索框结合
<script type="text/javascript">
$("#searchTypeDD").change(function DDChange() {
var searchType = $('#searchTypeDD').val();
var searchData = null;
var searchMethodName = null;
var searchTerm = $('#searchTermEntered').val();
if (searchType == 'movieSearch') {
data = { name: searchTerm };
searchMethodName = "GetmovieTitle";
}
else {
data = { director: searchTerm };
searchMethodName = "Getdirector";
}
$("#searchTermEntered").autocomplete({
source: function (request, response) {
$.ajax({
url: "AutoCompleteService.asmx/" + searchMethodName,
dataType: "jsonp",
data: searchData,
success: function (data) {
response(data);
}
});
},
minLength: 2,
select: function (event, ui) {
log("Selected: " + ui.item.value + " aka " + ui.item.id);
}
});
});
答
如果上面的代码是你使用的是什么,有一个错字。你得的$:ajax
代替$.ajax
(见下文)
$(document).ready(function(){
$(".searchTermEntered").autocomplete({
source: function(request, response) {
var searchType = $('.searchTypeDD').val();
var searchData = null;
var searchMethodName = null;
var searchTerm = $('.searchTermEntered').val();
if (searchType == 'movieSearch') {
searchData = { name: searchTerm };
searchMethodName = "GetmovieTitle";
}
else {
searchData = { director: searchTerm };
searchMethodName = "Getdirector";
}
$.ajax({
url: "AutoCompleteService.asmx/" + searchMethodName,
dataType: "jsonp",
data: searchData,
success: function(data) {
response(data);
}
});
},
minLength: 2,
select: function(event, ui) {
log("Selected: " + ui.item.value + " aka " + ui.item.id);
}
});
});
更新:我的代码中有一个错字。它已更新并应为您工作。唯一需要注意的是你使用.NET,当.NET呈现页面时,你的下拉列表的ID不会是searchTypeDD。 ASP.NET将一堆术语附加到控件ID的末尾,以确保它是唯一的,并提供了其父控件的用户名和等等。所以,我建议你为你的下拉控件做到这一点:
,并同您的输入:
然后,当我们被选择的控制上面的代码将工作类名($(。xxx)选择器)而不是ID($(#xxx)选择器)。
您是否收到任何特定错误?另外,你是否使用这个特定的自动完成插件? https://jqueryui.com/autocomplete/ – Keith