i used jqueryui autocomplete iwant be the same work for some input text
but when i use $(this).val() for send value of textbox it show error and when i use (".Degree").val() shows and send to server first textbox it incorrect
function DegreeAutoComplete() {
$(".Degree").autocomplete({
position: { my: "right top", at: "right bottom", collision: "none" },
source: function (request, response) {
var spin = $(".spinnerDegree");
spin.addClass("fa-spin fa-spinner");
$.ajax({
url: "#Url.Action("GetDegree")",
type: "POST",
dataType: "json",
data: { search: $(".Degree").val() },
success: function (data) {
spin.removeClass("fa-spin fa-spinner");
response($.map(data, function (item) {
return { label: item.PersianName, value: item.PersianName, id: item.Id };
}));
}
});
},
messages: {
noResults: '',
results: function (resultsCount) { }
},
select: function (event, ui) {
// ui.item.value contains the id of the selected label
alert($(this).val());
$(this).attr("sel", ui.item.id);
}
});
}
when i use: $(this).val();
elem.nodeName is undefined
hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[elem.nodeName.toLowerCa...
how can i fix it
this refers to ajax object inside it. Save this reference before using it in inside scope.
var spin = $(".spinnerDegree");
spin.addClass("fa-spin fa-spinner");
var $that = $(this);// save reference
$.ajax({
url: "#Url.Action("
GetDegree ")",
type: "POST",
dataType: "json",
data: { search: $that.val() },//use $that var here
success: function(data) {
spin.removeClass("fa-spin fa-spinner");
response($.map(data, function(item) {
return { label: item.PersianName, value: item.PersianName, id: item.Id };
}));
}
});
EDIT:
Just checked jquery UI doc
You should use request.term thats it.
source: function(request, response) {
$.ajax({
url: "#Url.Action("GetDegree")",
type: "POST",
dataType: "json",
data: {
search: request.term
},
success: function(data) {
//....
}
});
}
Related
I am coming to an issue where I am appending to my table using jQuery and also to <div class="jobEntity" id="bestTable">. For some reason I don't want to append my table like that. Is there a way to work around with my jQuery code to append the table properly? Thanks for the help.
{request.contextPath} - is just localhost:8080/
var cache = {};
$("#searchTextField").autocomplete({
minLength: 2,
focus: function(event, ui) {
event.preventDefault();
},
source: function(request, response) {
var term = request.term;
if (request.term in cache) {
response(cache[request.term]);
return;
}
$.ajax({
url: "#{request.contextPath}/JobSearchItem.xhtml",
type: "GET",
data: {
term: request.term
},
dataType: "json",
success: function(data) {
response(data);
}
});
},
select: function select(event, ui) {
event.preventDefault();
var url = '#{request.contextPath}/index.xhtml';
var searchValue = ui.item.value;
var data = new FormData();
data.append('searchValue', searchValue);
$.ajax({
url: url,
data: data,
method: "POST",
processData: false,
contentType: false,
cache: false
}).done(function(text) {
$('#results').append($(text).find('#bestTable'));
$('#results').append($(text).find('#textTable'));
$('#results').append($(text).find('table'));
$("#clearone").show();
});
},
response: function response(event, ui, data) {
if (!ui.content.length) {
var message = {
value: "",
label: "NOTHING HAS BEEN FOUND"
};
ui.content.push(message);
}
}
});
Well you could do something like this:
$.ajax({
url: url,
data: data,
method: "POST",
processData: false,
contentType: false,
cache: false
}).done(function(text) {
let append = $(text).find('#bestTable').text() + $(text).find('#textTable').text() + $(text).find('table').text();
$('#results').append(append);
$("#clearone").show();
});
As an idea, first prepare the append content and then append at once.
I am trying to fire a change event after auto complete.this change event will load a textbox with a name corresponding auto completes selected id. auto complete event is working perfectly but the change event is not responding.
<script>
$('#CustomerSupplyId').autocomplete({
source: function (request, response) {
$.ajax({
type: "GET",
url: "/Purchase/GetSuggestion",
data: { text: request.term },
success: function (data) {
response($.map(data, function (profile) {
return { label: profile.CustomerSupplyNm, value: profile.CustomerSupplyId, id: profile.CustomerSupplyId }
}
))
},
change: function (data) {
response($.map(data, function (profile) {
$("#textbox").val(profile.CustomerSupplyNm);
}))
}
})
}
});
</script>
What am i doing wrong here or what should i do?
if i do the success method like this
success: function (data) {
response($.map(data, function (profile) {
return { label: profile.CustomerSupplyNm, value: profile.CustomerSupplyId, id: profile.CustomerSupplyId },
$("#textbox").val(profile.CustomerSupplyNm)
}
))
}
the 'testbox' is loaded but the auto complete suggestion is despaired.But the 'textbox value is being changed for every keystroke which i don't want.
Set the textbox value in response's callback before returning
$('#CustomerSupplyId').autocomplete({
source: function (request, response) {
$.ajax({
type: "GET",
url: "/Purchase/GetSuggestion",
data: { text: request.term },
success: function (data) {
response($.map(data, function (profile) {
$("#textbox").val(profile.CustomerSupplyNm);
return { label: profile.CustomerSupplyNm, value: profile.CustomerSupplyId, id: profile.CustomerSupplyId }
}))
}
})
}
});
there is no change attribute for jquery's .ajax() method,
check docs here .
you should listen events after ajax call has been completed like:
$.ajax({
type: "GET",
url: "/Purchase/GetSuggestion",
data: { text: request.term },
success: function (data) {
response($.map(data, function (profile) {
return { label: profile.CustomerSupplyNm, value: profile.CustomerSupplyId, id: profile.CustomerSupplyId }
}
))
},
complete: function (data) {
do your dom manipulation here
}
})
jQuery ajax doesn't have a property change. So adding change property doesn't help.
I think what you want to do is something like this.
...
.autocomplete({
source: {
...
}
change: {
// Do something ...
}
})
...
I haven't had a lot of experience with jQuery but below is Autocomplete code that is successfully bolding the search characters in the search result dropdown rows:
.autocomplete({
delay: 500,
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
var list = $.ui.autocomplete.filter(availableTags, extractLast(request.term));
if (request.term) {
regex = new RegExp('(' + extractLast(request.term) + ')', 'gi');
list = list.map(function(item) {
return {
label: item.label.replace(regex, '<b>$1</b>'),
value: item.value
}
})
}
response(list);
},
I'm now trying to switch the source to an AJAX lookup. Can anyone let me know what the edit would be to the following AJAX code to get bold text characters like the first code example does?
.autocomplete({
delay: 500,
minLength: 0,
source: function (request, response) {
$.ajax({
url: 'default.aspx/fGetCityLookupData',
data: "{'strSearchText': '" + extractLast(request.term) + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('|')[1],
value: item.split('|')[0]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
TIA
Mark
Answered at another forum here: http://forums.asp.net/p/2092693/6042551.aspx?p=True&t=635965068036236809
I can't seem to find an answer for my problem. I have a simple jQuery autocomplete field and the entry is required by the model. But when I check it with the validation method it is not highlighted.
<tr>
<td>
<b style="color:red">*</b>Find User ID or Enter New:<br />
#Html.ValidationMessageFor(x=>x.UserId)
</td>
<td>
<input id="users" class="userModel" style="text-transform:uppercase" />
#Html.HiddenFor(x=>x.UserId, new { #id = "txtUserId" })
</td>
</tr>
$("#users").autocomplete({
delay: 0,
minLength: 0,
autoFocus: true,
source: function (request, response) {
$.ajax({
type: 'POST',
data: { 'data': request.term },
dataType: 'json',
url: '#Url.Action("GetAllUsers")',
success: function (data) {
response($.map(data, function (obj) {
return {
value: obj
}
}));
}
});
},
select: function (event, ui) {
neworold = "old";
$.ajax({
type: 'GET',
dataType: 'json',
url: '#Url.Action("GetUser")',
data: { userid: ui.item.label },
success: function (data) {
$("#txtUserName").val(data.UserName);
$("#ddlUserRole").val(data.UserRole);
$("#chkUserAdmin").prop("checked", data.Admin);
$("#chkUserTrans").prop("checked", data.Trans);
$("#chkUserReports").prop("checked", data.Reports);
$("#txtUserId").val(data.UserId);
},
error: function (xhr) {
var err = xhr.responseText;
alert('error');
}
});
}
}).focus(function () {
$("#users").autocomplete('search', $("#users").val());
}).blur(function () {
var keyEvent = $.Event("keydown");
keyEvent.keyCode = $.ui.keyCode.ENTER;
$(this).trigger(keyEvent);
if (neworold != "old") {
$("#txtUserId").val($("#users").val());
}
});
if (!$("#userForm").valid()) {
return false;
}
I am using Jquery autocomplete with ajax.
Everything works fine except when I set minLength to 0.
When I choose an element from the list, the autocomplete doesn't stop running and shows me the list again.
Here is the code:
$("#id_from").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://127.0.0.1:8000/core/get_from_cities",
dataType: "json",
data: {term: request.term},
success: function (data) {
response($.map(data.data, function (item) {
return {
label: item.value,
value: item.value
}
}));
}
});
},
minLength: 0
});
Thanks..
EDIT:
Here is the solution I came up with:
$("#id_to").focus(function() {
$( "#id_to" ).autocomplete( "enable" );
});
$("#id_ffrom").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://127.0.0.1:8000/core/get_from_cities",
dataType: "json",
data: {term: request.term},
success: function (data) {
response($.map(data.data, function (item) {
return {
label: item.city,
value: item.city,
}
}));
}
});
},
minLength: 0,
select: function (event, ui) {
$('#id_from_country').val(ui.item.country)
$("#id_ffrom").autocomplete( "disable" );
}
});