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);
}
});
Related
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);
});
Here is a fiddle example
I have trouble getting the $(this) to work in the source function with jQueryUI autocomplete.
The console shows that the search input isn't able to get its data attribute 'name' before sending out an Ajax request. Is there any way to pass the variable "name" to data?
$('.input').autocomplete({
source: function (request, response) {
var name = $(this).data('name');
console.log(name);
$.ajax({
url: url,
dataType: "json",
data: {
'q': request.term,
'field': name
},
success: function (data) {
response($.map(data.query.results.json.json, function (item) {
return {
label: item.name,
}
}));
}
});
},
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.label);
$(this).val(ui.item.label);
},
open: function () {
$(this).autocomplete("widget").width(400)
}
});
You should use this.element to access corresponding input element. this points to the autocomplete instance itself:
var name = $(this.element).data('name');
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.
i have a textbox with autocomplete feature,and a button.I want to enable the button only when a value is selected from the autocomplete list.
how to do this?
Here is my autocomplete function:
<script type="text/javascript">
$(document).ready(function () {
$("#<%=xyz.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/WebService.asmx/Get") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=abc.ClientID %>").val(i.item.val);
},
minLength: 0
}).bind('focus', function () { $(this).autocomplete("search"); });
});
</script>
In your select function add this:
select: function (e, i) {
$("#<%=abc.ClientID %>").val(i.item.val);
$("#buttonid").prop("disabled", true); // true disabled, false enabled
},
EDIT:
$("#buttonid").prop("disabled", false); // this put button enabled
JsFiddle - Example
For a plain button you'll want to set the the button as disabled when the document loads, e.g.
$(document).ready(function () {
$('#btn')[0].disabled = true;
...
and then enable it with the select function, e.g.
select: function (e, i) {
$("#<%=abc.ClientID %>").val(i.item.val);
$('#btn').disabled = false; // <-- enables button
},
Try This: The following will be called when you perform select (use keyboard to select, dont know about mouse select)
$( "#<%=xyz.ClientID %>"" ).on( "autocompleteselect", function( event, ui ) {
$("#buttonid").prop("disabled", false);
});
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 */
}
}
});