I need to add URL to data returned in autocomplete search
My JS
$(document).ready(function() {
$( "#search" ).autocomplete({
source: function(request, response) {
$.ajax({
url: "{{url('autocomplete')}}",
data: {
term : request.term
},
dataType: "json",
success: function(data){
response($.map(data,function(obj){
//console.log(obj.city_name);
return obj.name;
}));
return(resp);
}
});
},
minLength: 1
});
});
My Controller
$search = $request->get('term');
$result = Post::where('title', 'LIKE', '%'. $search. '%')->get();
return response()->json($result);
How can I implement url in results using id of Posts?
Related
I am a new learner, trying to use JQuery autocomplete plugin. but unable to get the results in autocomplete suggestion, although I am getting the results in console.log and as an alert. But not in suggestion list.
Input field
'Name: <input type="text" id="hint" name="hint" />'
jquery
$(document).ready(function () {
$("#hint").keyup(function () {
$( "#hint" ).autocomplete({
source: function(request, response) {
//console.info(request, 'request');
//console.info(response, 'response');
$.ajax({
//q: request.term,
url: "<?php echo base_url(); ?>index.php?Librarian/autocomplete/",
data: { term: $("#hint").val()},
dataType: "json",
type: "POST",
success: function(data) {
alert(data)
console.log(data);
response(data);
}
});
},
minLength: 2
});
});
});
Controller
function autocomplete($param1 = '', $param2 = '', $param3 = '') {
// load model
$this->load->model("Librarian_model");
$search_data = $this->input->post('term');
$result = $this->Librarian_model->get_autocomplete($search_data);
echo json_encode($result);
//returning the result as result_array() also tried implode function but got the error at response
}
OUtput at console log :
enter image description here
and in alert i got object-object but when I use JSON.stringify output is a array
Seams that you're ajax response format issue use map function to format ajax response -
$(document).ready(function () {
$("#hint").keyup(function () {
$( "#hint" ).autocomplete({
source: function(request, response) {
//console.info(request, 'request');
//console.info(response, 'response');
$.ajax({
//q: request.term,
url: "<?php echo base_url(); ?>index.php?Librarian/autocomplete/",
data: { term: $("#hint").val()},
dataType: "json",
type: "POST",
success: function(data) {
alert(data)
console.log(data);
response($.map(data, function (item) {
return {
label: item.name,
value: item.name
};
}));
}
});
},
minLength: 2
});
});
});
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 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
});
}
});
});
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)
{}
}
});
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,
});
});