I'm trying to trigger a custom event like:
typeahead:select but nothing happens.
My code is listing the info I want but then when I select nothing happens.
What am I doing wrong?
var route = "autocomplete";
$('.clientName').typeahead({
minLength: 1,
highlight: true,
source: function (term, process) {
return $.get(route, { term: term }, function (data) {
return process(data);
});
}
});
$('.clientName').on('typeahead:select', function(ev, suggestion) {
alert("here");
console.log('Selection: ' + suggestion);
});
Related
I am trying to use jquery UI autocomplete, but somehow the same won't show up despite having no javascript error.
here is my json data:
{"d":"[{\"label\":\"XYZ\",\"desc\":\"desc 1\",\"value\":\"XYZ\",\"ID\":595,\"icon\":\"UM-892983\"},{\"label\":\"ABC .\",\"desc\":\"desc 2\",\"value\":\"ABC .\",\"ID\":1681,\"icon\":\"UM-432944\"}]"}
Here is my JS Function for processing the autocomplete:
$().ready(function(){
$("#txtName").bind("keyup", function (e) {
// Ajax call returns the above json data
// On Ajax Success I call
onSucName(returnData.d);
});
});
function onSucName(result) {
var varArrAdms = $.parseJSON(result);
$("#txtName").autocomplete({
source : varArrAdms,
select : function (event, ui) {
setNameValue(ui.item.icon)
$("#txtNo").val(ui.item.icon)
$("#btnSearch").click();
},
open : function () {
$(this).addClass('loadingTxtBox');
},
close : function () {
$(this).removeClass('loadingTxtBox');
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.value + " <b> desc:" + item.desc + "</b> <i> No:" + item.icon + "</i></a>").appendTo(ul);
};
}
Where am I wrong?
Try this example
$('#txtName').autocomplete({
source: function (request, response) {
$.ajax({
url: 'url',
data: {}, //pass data here
dataType: 'json',
type: 'post',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.icon
}
}));
}
})
},
select: function (event, ui) {
var itemval = ui.item.label;
// here you can access selected result `itemval`
return false;
},
minLength: 1
});
Why are you binding the autocomplete on keyup.... Rather you should bind it once.
Also, before rebinding it you shoud destroy the existing instance.
I am using jquerys autocomplete plugin to search over a list. In the base of every page autocomplete floats over the page regular. But when i put searchbox in a bootstrap modal dialog box autocomplete dropdown stays at the back and couldn't be displayed. How can i stabilize it on the modal box.
/* the modal caller*/
$('#bizimMesajci').modal();
/* autocomplete plugin codes */
$('#' + nesneID).autocomplete({
source: function (request, response) {
response([{
label: "Aranıyor...",
loading: true
}]);
$.ajax({
url: "evrak_action.php",
data: {
isTipi: 'kurumListesi',
jsonMU: 'evet',
arananKurum: $('#' + nesneID).val()
},
dataType: "json",
type: "POST",
success: function (data) {
//=========================================================<
response($.map(data, function (item) {
return {
label: item.label,
value: item.label,
kID: item.kID
}
}));
//=========================================================<
},
});
},
select: function (event, ui) {
$('#' + nesneIDnum).val(ui.item.kID);
$('#' + nesneID).val(ui.item.label);
//console.log($("#evrakKurumID").val());
return false;
},
focus: function (event, ui) {
return false;
},
minLength: 3
});
http://jsfiddle.net/7zNBH
Just add an optional parameters to autocomplete plugins caller function as described here: http://api.jqueryui.com/autocomplete/#option-appendTo solves my problem.
in my project im using the jQuery Autocomplete which is working great.
the problem is, that i want to handle a situation were a user changes the input of the text.
for ex. the data contains ("prov 1", "prov 2"), the user choose from the menu "prov 1" but then changed it to "prov 2" by changing the 1 with 2.
i implemented the "change" event in the js but the ui.item is empty (i guess since the menu is not shown..)
i read that the "change" event is fired only when the text box is losing focus -> not to good for me, since the flow is selecting a "prov" and clicking button to continue.
any suggestions ??
here is my code:
JS
$(element).autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
url: requestUrl,
dataType: "json",
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Label,
value: item.Label,
realValue: item.Value
};
}));
},
});
},
select: function (event, ui) {
var hiddenFieldName = $(this).attr('data-value-id');
$('#' + hiddenFieldName).val(ui.item.realValue);
hiddenFieldName = $(this).attr('data-value-name');
$('#' + hiddenFieldName).val(ui.item.label);
},
change: function (event, ui) {
alert('changed');
if (!ui.item) {
alert('no value'); /* IS FIRED */
} else {
}
}
});
});
Try the keypress event handler -- http://api.jquery.com/keypress/
Try change this:
change: function (event, ui) {
to this:
input: function (event, ui) {
Or you can try with this:
$(element).autocomplete({
minLength: 2,
//all your code but not change: function
}).on('input', function(e){
alert('changed');
if (this.value.length <== 0) {
alert('no value'); /* IS FIRED */
} else {
alert(this.value);
}
});
I'm trying to use x-editable with select2 in an Ember.js application.
I created the following editable element:
Test parent
And used this JavaScript:
$(function() {
$.fn.editable.defaults.mode = 'inline';
$('.editable').editable({
type: 'select2',
select2: {
placeholder: "Search for a parent...",
minimumInputLength: 3,
multiple: true,
ajax: {
url: 'http://localhost:8001/api/parents',
dataType: 'json',
data: function (term, page) {
return { q: term }; // search term
},
results: function (data, page) {
return {results: data};
}
},
formatResult: function(result) {
return result.first_name + ' ' + result.last_name;
},
formatSelection: function(selection) {
return selection.first_name + ' ' + selection.last_name;
}
},
// Used for sending JSON instead of form data
params: function(params) {
return JSON.stringify(params);
}
});
});
When I click Test child the ajax spinner appears and the following error in console is shown: Uncaught TypeError: Cannot read property 'id' of null
It refers to this:
$.fn.select2.defaults = {
...
id: function (e) { return e.id; },
...
}
What could I be doing wrong here? Thanks!
Are you tapping into the X-Editable’s success method?
Here's an interesting article on how a company implemented X-Editable into an Ember app: http://blogs.visoftinc.com/2014/11/12/using-xeditable-with-ember/
I have autocomplete working on my site with the following:
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
}
});
});
What I want to do now is that when a user types in something that is not shown on the dropdown, I'd like for the following to take place:
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
I tried using the following but it didn't work:
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
if(typeof(ui.item)){
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
} else {
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
}
}
});
});
the select evevnt is only triggered when you select an item in dropdown
you could do it on search event
$(function () {
$("#client").autocomplete({
source: "/appointments/clients.json",
minLength: 1,
select: function (event, ui) {
$('input[name="clientid"]').val(ui.item.id);
$('#app-submit').html('Add Appointment for ' + ui.item.value);
},
search: function() {
$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');
}
});
});
I don't know what the whole idea is without seeing markup. But my guess is:
$("#client").autocomplete({
source: function( request, response ) {
$.ajax({
url: "/appointments/clients.json",
dataType: "jsonp",
success: function( data ) {
var suggestions = $.map( data, function( item ) {
return {
label: item.value,
value: item.id
}
});
// idea: whatever I have, extend to extra item.
suggestions.push({
label: 'Add appointment',
value: 0
});
response( suggestions );
}
});
},
select: function(evt, ui){
if( ui.item.label == 'Add appointment'){
/* do something special with it */
}else{
/* blah blah */
}
}
});