I am getting response through autofill which i can view through inspect in chrome. But I couldn't display properly neither i am getting any result in console.log
$(document).ready(function(){
$(function() {
$("#search_text").autocomplete({
source: "/find_city",
minLength: 1,
data:$('#search_text').val(),
success:function(data){
console.log(data);
}
});
});
})
Your source must be your ajax request
source: function (request, response) {
$.ajax({
url: "/find_city",
data: $('#search_text').val(),
dataType: "json",
success: function (data) {
// do something
}
});
}
and in your callback just return assign your desired value and label for the select input option element(s)
response($.map(data, function (item) {
return {
label: item.name,
value: item.name
}
}));
So you code would be like this
source: function (request, response) {
$.ajax({
url: "/find_city",
data: $('#search_text').val(),
dataType: "json",
success: function (data) {
response($.map(data, function (item) {
return {
label: item.name,
value: item.name
}
}));
}
});
}
I have found solution to my issue. I have changed name field from cities table to value and it works like a charm. I could also use key field
Related
Typeahead source not getting updated if user types in the textbox then clears it, then again start typing in it
Here is my code
<input id="docSearch" type="text" autocomplete="off" placeholder="Search Doctor..." >
$('#docSearch').keyup(function(){
var list;
var q = $('#docSearch').val();
if(!q){
return;
}
$.ajax({
type: "POST",
url: "pullDocs.php",
data: {inp:q},
success: function(data){
//Typeahead accepts only proper json
list = $.parseJSON(data);
$('#docSearch').typeahead({
source: list
})
}
});
});
I changed my js code(Just replaced the keyup function) as below, then it worked well
$(document).ready(function () {
$('#docSearch').typeahead({
source: function (query, result) {
$.ajax({
url: "pullDocs.php",
data: 'inp=' + query,
dataType: "json",
type: "POST",
success: function (data) {
result($.map(data, function (item) {
return item;
}));
}
});
}
});
});
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 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) {
//....
}
});
}
I have very generic javascript code for autocomplete. Everything works fine, but when You type:
Manner
You will have result:
Manner
Männer
In database i have words with special letters, but in case "manner" i dont want to show word with letter "ä" - as this dont fit to result to me.
How can i ignore results like this ?
Thank You for any advice.
The code:
$(document).ready(function () {
if ($('#tags').length <= 0) {
return;
}
var $project = $('#tags');
$project.autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
dataType: "json",
type: 'post',
cache: false,
data: {term: request.term},
url: '/ajax/',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Cities__zip,
value: item.Cities__zip
}
}));
}
});
},
});
});
This looks to like something that would be better to handled server rather than client side. But if you want to do it in the ajax call you could do something like this, which utilizes a regular expression to match non-English characters, and filters those items out:
$(document).ready(function () {
if ($('#tags').length <= 0) {
return;
}
var $project = $('#tags');
$project.autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
dataType: "json",
type: 'post',
cache: false,
data: {term: request.term},
url: '/ajax/',
success: function (data) {
response($.map(data, function (item) {
return (/[^\u0000-\u007F]+/).test(item.Cities__zip) ? null :
{
label: item.Cities__zip,
value: item.Cities__zip
}
}));
}
});
},
});
});
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" );
}
});