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
});
});
});
Related
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?
It always returns 200 OK, but jQuery executes the error event. I tried a lot of things, but I could not figure out the problem. I am adding my code below:
$(document).ready(function(){
$('#manual').click(function(){
var id = $('#manual_text').val();
$.ajax({
url: "<?php echo base_url(); ?>index.php/admin/get_data_id",
type: "POST",
data: { 'tag': id },
success: function(data)
{
alert(data);
},
error: function()
{
alert("Error");
}
})
});
});
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 two textbox in form.
when i type some value inside textbox and click the button then i want to echo this value in my function.
I want to take value of my textbox and pass this in my controler function on button click using javascript and ajax.
but my script is not working and not showing any value..
<script>
$(document).ready(function() {
$("#subvessels").on('click', function() {
var shipment_title = $("#shipment_title").val(); //textbox value
var shipment_point = $("#shipment_point").val(); //textbox value
if (shipment_point) {
var dataString = 'shipment_title=' + shipment_title;
var dataString = 'shipment_point=' + shipment_point;
var values = $(this).serialize();
ajaxRequest = $.ajax({
url: '<?php echo Router::url(array("controller" => "DispatchedJobs", "action" => "approxBudget")); ?>',
type: 'POST',
data: dataString,
dataType: "html",
beforeSend: function() {
$('.spinicon').show();
},
success: function(response) {
$("#vessels_table").html(response);
},
complete: function() {
$('.spinicon').hide();
}
});
}
});
});
</script>
//controller function
public function approxBudget($shipment_point,$shipment_title)
{
echo $shipment_title;
echo $shipment_point; exit();
}
Give the parameters as an object to data. This is everything you need.
$("#subvessels").on('click', function() {
ajaxRequest = $.ajax({
url: '<?php echo Router::url(array("controller" => "DispatchedJobs", "action" => "approxBudget")); ?>',
type: 'POST',
data: {
shipment_title: $("#shipment_title").val(),
shipment_point: $("#shipment_point").val()
},
dataType: "html",
beforeSend: function() {
$('.spinicon').show();
},
success: function(response) {
$("#vessels_table").html(response);
},
complete: function() {
$('.spinicon').hide();
}
});
});
In php you get the values with $_POST["shipment_title"] and $_POST["shipment_point"] by default. If you use a framework, there could be other ways to access the values. But the request is correct like above.
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)
{}
}
});