JQuery Autocomplete trouble - javascript

I'm trying to recreate JQUery autocomplete example from its website:
http://jqueryui.com/autocomplete/#multiple-remote
The only thing I change is I changes the source property from :
source: function( request, response ) {
$.getJSON( "search.php", {
term: extractLast( request.term )
}, response );
},
To:
source: function (request, response) {
$.ajax({
type: "POST",
url: "/UIClientsWebService.asmx/SearchCRMUsers",
data: "{term:'" + extractLast(request.term) + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$("#commentBody").autocomplete("option", "source", result.d);
}
}, response);
},
Now the problem is autocomplete just work for first ',' . When I choose my first item, then when I want to search and choose second item, nothing happen. There is no error in my firebug. I can see search method call but source does not change and also nothing shown as my autocomplete items. I can see my search term change correctly but actually no search happen.

try add the option multiple: true to your script
$(document).ready(function() {
src = '/UIClientsWebService.asmx/SearchCRMUsers';
$("#yourSelector").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: "{term:'" + extractLast(request.term) + "'}",
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300,
multipleSeparator:",",
multiple: true,
});
});

Related

how would i remove term parameter from jquery autocomplete ajax URL

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([]);
}
});
});
});

How to pass the text field value to C# page using ajax

I want to pass the parameter to another page using ajax.Actually i have one popup dialog box,in that dialog box i have one text field,i have to send that value to another page to save into db.not getting how to do it.
Here is my code
$(function() {
$("#button").click(function() {
$("#popup").dialog({
title: "Add",
width: 430,
height: 250,
modal: true,
buttons: {
Add: function() {
var t = ($('#user').val());
$.ajax({
type: "POST",
url: "Details.aspx.cs/getData",
data: {
"test1": t
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert(data);
}
});
$(this).dialog('close');
}
}
});
});
})
The ajax call seems fine. There could be a possibility that the json string is not formed correctly from the textbox javascript value. try using JSON.stringify:
function() {
var t = ($('#user').val().trim());
var payload = { "test1" : t };
$.ajax({
type: "POST",
url: "Details.aspx.cs/getData",
data: JSON.stringify(payload),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert(data);
}
});
You are not transferring the data correct. if you want to do it this way, you have you use JSON.stringify of JSON.parse.
You can also try to use
data: "{'test':'" + t+ "'}",
or something of this sort, I used to do it in the past, but don't have the example in front of my eyes now. Will have it clearly later on though.

Jquery Autocomplete doesn't work

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)
{}
}
});

JQuery UI AutoComplete - can't get data typed in the input field

I've changed the standard method of Jquery UI autocomplete to use POST instead of GET:
$(function () {
var data = $(this).val();
var dataString = 'location=' + data;
$(".suggest_locations").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "ajax.php",
data: dataString,
dataType: "json",
cache: false,
success: response
})
},
minLength: 1,
delay: 0,
autoFocus: true
});
});
But "data" is always empty, no matter what I write in the input field.
I'm using an external file called ajax.php to get all saved locations from a database, but it'll show always all locations available, because "data" doesn't read what I'm typing in the input field.
I really appreciate any help!
The variable data is not updated when you change the value of your input field, but only once: when the document is loaded.
Use this instead of your source option:
source: function(request, response) {
$.ajax({
url : 'ajax.php',
type : 'post',
dataType: 'json',
data : 'location=' + request.term,
cache : false,
success : function(data) {
response(data);
}
});
}

Dynamically get URL for JQuery Ajax request from Data Attribute

I have a JQuery Autocomplete function that I need to be able to pass a url into. I'm trying to pull the url from the html data-url attribute, however I'm currently getting a variable is undefined message in the JavaScript console, so I know I'm not getting the values I expect. I've included my code below. Any help would be greatly appreciated.
JQuery Function:
$(function () {
$(".autocomplete").autocomplete({
delay: 0,
source: function (request, response) {
var baseURL = $(this).data("url");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: baseURL + request.term,
dataType: "json",
success: function (data) {
response(data)
}
});
},
minLength: 1,
});
HTML Element:
<td style="width: 90%">
<label for="tag_Name" class="inline">Server Tags: </label>
<input class="fixed autocomplete" type="text" id="tag_Name" placeholder="Type tags to add..." data-url="/RequestFieldValues/GetLikeResourceTags/?prefix=" />
</td>
Try this instead...
$(function () {
$(".autocomplete").each(function() {
var baseURL = $(this).data("url");
$(this).autocomplete({
delay: 0,
source: function (request, response) {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: baseURL + request.term,
dataType: "json",
success: function (data) {
response(data)
}
});
},
minLength: 1,
});
});
});
I've put the .autocomplete() inside an each() function so you can refer to this to get the base url from the data attribute. You can then pass that into the source function.
Incidentally, if there is more than 1 input then you need to make each one have a unique ID. You shouldn't have elements with the same ID :)
Another way to change the URL in a ajax request
$.ajax({
url: "http://static.url/",
beforeSend: function (xhr) {
this.url = "http://dyn.url/" + "here"
}
});
i think what you should be doing is :
$(function () {
var baseURL = $(".autocomplete").data('url');
$(".autocomplete").autocomplete({
delay: 0,
source: function (request, response) {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: baseURL + request.term,
dataType: "json",
success: function (data) {
response(data)
}
});
},
minLength: 1,
});

Categories