I have an autocomplete text field, that uses JSON like so:
$(function () {
var src = '#Url.Action("GetParts", "Parts")'
$("#autoCompleteBox").autocomplete({
source: function (request, response) {
$.ajax({
url: src,
async: true,
dataType: "json",
data: {
partNumber: $("#autoCompleteBox").val()
},
success: function (data) {
response(data[0]);
}
});
}
});
});
What I want to do is when the user selects the item from the suggested list is make another ajax call to get specific information about that item and populate other textboxes on the page.
What is the best approach for this?
You can do that in the select event of the autocomplete.
$(function () {
var src = '#Url.Action("GetParts", "Parts")'
$("#autoCompleteBox").autocomplete({
source: function (request, response) {
$.ajax({
url: src,
async: true,
dataType: "json",
data: {
partNumber: $("#autoCompleteBox").val()
},
success: function (data) {
response(data[0]);
}
});
},
select: function (event, ui) {
var item= ui.item.label;
//Now make the ajax call here
$.post("SomeValidUrl", new { id : item } ,function(res){
// do something with res
});
}
});
});
Related
I need to dynamicly pass data to my select list with jquery. I see that data in console but my list is empty. Can you help me find the solution?
<script type="text/javascript">
var kunnr;
$(document).ready(function () {
$('#NAME1').autocomplete({
source: function (request, response) {
$.ajax({
url: "Form2",
method: 'POST',
data: {
term: $('#NAME1').val()
},
success: function (data) {
response(data);
}
});
},
select: function (event, ui) {
kunnr = ui.item.kunnr;
$.ajax({
url: "Form3",
method: 'POST',
data: {
kunnr: kunnr
},
success: function (data) {
console.log(data);
//there is my data ^ i need to pass to select list
}
});
}
});
});
</script>
My select list
#Html.DropDownListFor(model => model.Subaccount, new SelectList(" "), new { #class = "form-control" })
Change your javascript code to this
var kunnr;
$(document).ready(function () {
$('#NAME1').autocomplete({
source: function (request, response) {
$.ajax({
url: "Form2",
method: 'POST',
data: {
term: $('#NAME1').val()
},
success: function (data) {
response(data);
}
});
},
select: function (event, ui) {
kunnr = ui.item.kunnr;
$.ajax({
url: "Form3",
method: 'POST',
data: {
kunnr: kunnr
},
success: function (data) {
var selectData = JSON.parse(data);//use JSON.parse(), if the data is not already json formatted
$("#Subaccount").empty();
selectData.forEach(function (obj) {
//NOTE the Value and Text are what you assigned them when you fetched them
$('#Subaccount').append($('<option></option>').val(obj.Value).html(obj.Text));
});
}
});
}
});
});
When going to search customer name, jQuery automatically appends cstmr-prfsnl-ajax-search.php?term=[search value] but I want to replace term with customer. please help me.
$("#ccpd_name").autocomplete({
source: "cstmr-prfsnl-ajax-search.php",
minLength: 1
});
You can use like this :
$("#ccpd_name").autocomplete({
source: function (request, response) {
$.ajax({
url: "cstmr-prfsnl-ajax-search.php",
data: { customer: request.term },
dataType: "json",
success: response,
error: function () {
response([]);
}
});
});
});
cstmr-prfsnl-ajax-search.php?customer=[search value]
you can also omit the data field like so:
$("#ccpd_name").autocomplete({
source: function (request, response) {
$.ajax({
url: "cstmr-prfsnl-ajax-search.php?customer=" + request.term,
dataType: "json",
success: response,
error: function () {
response([]);
}
});
});
});
I am trying to use bootstrap typeahead.
I am having trouble handling which item has been selected.
Below is the code I have so for
var bindto = $(".search.typeahead");
bindto.typeahead({
source: function (query, response) {
var map = {};
var advicesearchList = [];
return $.ajax({
url: "/Advice/AutoComplete",
type: "GET",
cache: false,
data: { querystring: query },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (i, result) {
map[result.Title] = result;
advicesearchList.push(result.Title);
});
response(advicesearchList);
}
});
}
}).on("typeahead:selected", function (e, o) {
console.log("item selected");
});
What would be the correct way to detect what the user has selected from one of the items in the list
thanks
Try using the afterSelected option:
var bindto = $(".search.typeahead");
bindto.typeahead({
source: function (query, response) {
//your code...
}, afterSelect: function (data) {
//print the data to developer tool's console
console.log(data);
}
});
Docs
I am using jQuery Autocomplete.
It's making an AJAX request on every keypress which I don't want. If data from a previous AJAX request matches a search it should not make any more AJAX requests.
<script>
$('#tags').autocomplete({
source: function (request, response) {
$.ajax({
url: '/TestDDl/Index',
// data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.user, function (item) {
return {
label: data.name,
val: data.val
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
autoFocus: true,
keypress: function (event, ui) {
alert('Not Selected');
if (!ui.item) {
alert('Not Selected');
}
}
});
});
Here if I am typing the name of a user which is already in previous AJAX request data, it should not make an AJAX request on next the keypress.
You can declare a variable, assing user input to it, then update it in your success function. And just before making next call, check if your variable matches the next data.
Something like this:
<script>
var recent = '';
$('#tags').autocomplete({
source: function (request, response) {
if (recent == request.term) {
return;
}
recent = request.term;
$.ajax({
url: '/TestDDl/Index',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.user, function (item) {
return {
label: data.name,
val: data.val
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
autoFocus: true,
keypress: function (event, ui) {
alert('Not Selected');
if (!ui.item) {
alert('Not Selected');
}
}
});
</script>
<script>
window.xyz = []; //For saving history
$('#tags').autocomplete({
source: function (request, response) {
if(xyz[request]){
response(xyz[request]); // Return previously saved data
}else(
$.ajax({
url: '/TestDDl/Index',
// data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var res = $.map(data.user, function (item) {
return {
label: data.name,
val: data.val
}
});
xyz[request]=res; //set data to reuse later
response(res)
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
}
},
autoFocus: true,
keypress: function (event, ui) {
alert('Not Selected');
if (!ui.item) {
alert('Not Selected');
}
}
});
</script>
Your next ajax reques should be in the Success function of the first ajax request.Buid the logic there.If you find the match don't call the second ajax request else call the second ajax request and all should be in the success function of the first ajax request.
i'm trying to add an autocomplete to an input box (i'm in asp.net/vb.net project) with the autocomplete source from a database.
So i've created a webservice and i did an ajax call:
<script type="text/javascript">
$(document).ready(function () {
$('#modelloInput').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebServices/AutocompleteWS.asmx/getTuttiIModelli",
data: "{'prefix':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response(data.d);
},
error: function (result) {
//alert("Error");
}
});
}
});
});
</script>
<input type=text id="modelloInput" />
Now when i run the application and i write something in the inputbox i got the entire list in the autocomplete box.
I can write everything but i get always the entire list of elements.
Why?
I think there must be some issue in your web-service code,
you can use this basic code for autoComplete,
$( "input.suggest-user" ).autocomplete({
source: function( request, response ) {
$.ajax({
dataType: "json",
type : 'Get',
url: 'yourURL',
success: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
response( $.map( data, function(item) {
// your operation on data
}));
},
error: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3,
open: function() {
},
close: function() {
},
focus:function(event,ui) {
},
select: function( event, ui ) {
}
});
OR
$("#id").autocomplete(
{
search: function () {},
source: function (request, response)
{
$.ajax(
{
url: ,
dataType: "json",
data:
{
term: request.term,
},
success: function (data)
{
response(data);
}
});
},
minLength: 2,
select: function (event, ui)
{
var test = ui.item ? ui.item.id : 0;
if (test > 0)
{}
}
});