Develop Reference

How to set input field to empty which is used as autocomplete in jquery?

I am an input field that I am using for autocomplete so after selecting an option I want to clear that input field that is used as a autocomplete. bellow is my example but it's not working.
$('#autocomplete').val('') is doing nothing.
$('#autocomplete').autocomplete({
source: my_url,
select: function ( event, ui){
$('#autocomplete').val('')
}
})

You can use a timer to ensure the code inside run at the end.
$('#autocomplete').autocomplete({
source: my_url,
select: function ( event, ui){
setTimeout(() => {
$('#autocomplete').val("");
}, 1);
}
}
)

How to detect manual entry or selection in Jquery AutoComplete

I have this jsfiddle for Jquery autocomplete
https://jsfiddle.net/fp7n8em5/
I want to identify , if the text inside the autocomplete field was a manual entry or a selected one from dropdown
when i was debugging this , i found out that the eventype is same for both that is autocompletechange
basically i need to clear some of the fields if its a manual entry and don't want to do it when its a selection
my code
$( "#tags" ).autocomplete({
source: availableTags,
select : selectedOne,
change: changedOne
});
function selectedOne()
{
alert('belongs to selectedOne')
}
function changedOne()
{
alert('belongs to changedOne')
}
});

Can you differentiate the data coming from the external source?
For example you can return an extra parmeter (ie: ID), or you can add a fixed parameter (ie: type = external).
Then, when change fires, you test the returned object, if there is the parameter, then it comes from dropdown.
Or you can set input hidden variable and then you'll test if this variable is empty.
Here is an example:
$( "#tags" ).autocomplete({
source: availableTags,
minLength: 2,
select: function( event, ui ) {
document.formname.input_type_hidden.value = ui.item.id;
}
});
<form name="formname"><input type="hidden" name="input_type_hidden" value=""></form>

How to send a variable via jquery

I just created an autocomplete textbox via jquery now i am stuck with two problems.
1) I need to get the value of the selected item from the Autocomplete list.
So far i did these..
My jquery
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
I am getting the autocomplete list from the database its working fine, but the problem is that
2) When i type 'r' all the names with values gets populated and if i select say Robin from the list and try to display it with alert, i only gets 'r', (i only typed r,and selected 'robin' from list) why is this so?
here is the code i wrote for this
for the autocomplete textbox
<input name="tags" type="text" id="tag" value="" onchange= "newfn()" />
and in newfn()
<script>
function newfn()
{
authname = document.getElementById("tag").value;
document.autoquote.qid.value=authname;
alert(authname);
}
</script>
and if i put an alert at first saying
alert("Hi");
then, i get first alert saying hi, and I get robin not r
So what is the correct way to get what value i selected from the autocomplete list?
Now my second Question is that the selected value from this autocomplete textbox, I need to pass it with another jquery to another php page so that I can get this value there and give it in a query as a criteria.

Because it is not the way to catch a select event http://api.jqueryui.com/autocomplete/#event-select :
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true,
select: function( event, ui ) {
//Then use "ui" object, for example ui.item.label or ui.item.value
}
});
});

$(".autosearch-smart").autocomplete('autocomplete.php', {
select: function( event, ui ) {
// here you can get id and values from the autocomplete list
// try to debug
console.log(ui.item.id);
console.log(ui.item.label);
console.log(ui.item.value);
}
});

you can use the autocomplete's select property like this
$("#tag").autocomplete('autocomplete.php', {
selectFirst: true,
select: function (event, ui) {
var label = ui.item.label;
var value = ui.item.value;
alert(label);
alert(value)
// you can write additional javascript code here to make use of these values
}
});
Please check the jQuery UI documentation for more examples and info.
Here is a JSFiddle.(Please note that an additional source attribute has been added in the fiddle to simulate the loading of data set as real cross domain AJAX calls are not allowed)

$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
select: function( event, ui ) {
//check the values in console
alert(ui.item.value+" - "+ui.item.value);
}
});
});

jQuery UI autocomplete suddenly stopped working

I have simple jQuery UI autocomplete, which was working and now it's not. The code is as follows:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#city" ).autocomplete({
source: function( request, response ) {
var cities = new Array();
cities.push({"label" : "Chicago", "value" : 1});
cities.push({"label" : "Houston", "value" : 2});
response(cities);
},
focus: function(event, ui) {
//console.log(ui.item.label);
$(this).text(ui.item.label);
//console.log($(this).text());
event.preventDefault();
//console.log($(this).text());
},
select: function(event, ui) {
//console.log($(this).text());
event.preventDefault();
//console.log($(this).text());
}
});
});
</script>
</head>
<body>
<input id="city" />
</body>
</html>
I am using the focus handler to show the label in the textbox instead of the value (which is what the autocomplete does by default). What is happening now is that the textbox is showing neither label nor value, it is showing the value that I have typed (say 'Chi')
This was working but now it's not. I thought it was because I had included some other javascript and there was a function name clash. But I moved it to a separate HTML as you can see above and it's still not working.
BTW if I uncomment those console log statements and from the dropdown I select Chicago, then all of them print Chicago.
This seems like some silly mistake somewhere but has me stumped. Any suggestions?
EDIT 1: BTW, if I remove the focus and select handlers then the autocomplete works with its default functionality.
EDIT 2: Would be great if someone can test this on their own computer

There are a couple of changes from default functionality which you appear to be attempting here.
You would like the "completed" variable to be previewed in the main input when it is selected
You would like the label, not the value, to be shown when a selection has been made.
The reasons that neither of these are currently working are related and simple: <input> fields only have a value associated with them, not a separate "label" and "value". When you select an "autocomplete" option from the list, it is the "value", which gets filled in.
For point 1, the part which is being updated by the focus: event, just replace .text(...) with .val(...), as that is the attribute of the <input> field which you actually want to update:
focus: function(event, ui) {
$(this).val(ui.item.label);
event.preventDefault();
},
For point 2, as you actually want the field to be filled in by the label, not the value, you could just fill in the same text for both (the default if a flat array is given):
source: function( request, response ) {
var cities = new Array();
cities.push("Chicago");
cities.push("Houston");
response(cities);
},
Remember that autocomplete is always optional. All you need to fill in for the value: is something which you back-end can fully disambiguate. That could be an id, but it usually makes sense to use something which the user might have typed in on their own. Of course, if you're doing that, it may also make sense to use ui.item.value instead of ui.item.label in the focus: event, as well.
With the source made sane as above, you can drop the select: event entirely.

I think the problem lies in the assignment of the autocomplete source. This works for me:
$(function() {
var cities = [
{"label": "Chicago", "value": 1},
{"label": "Houston", "value": 2}
];
$( "#city" ).autocomplete({
source: cities, // assign the source directly
focus: function(event, ui) {
//console.log(ui.item.label);
$(this).text(ui.item.label);
//console.log($(this).text());
event.preventDefault();
//console.log($(this).text());
},
select: function(event, ui) {
//console.log($(this).text());
event.preventDefault();
//console.log($(this).text());
}
});
});​
here's a fiddle

jQuery UI Autocomplete

I am using jQuery UI's autocomplete plugin and everything is well and good except for that fact that when a user clicks the value they want the function I have assigned to the "select:" method fires before the value of the field is changed. So if I type "Foo" in the input field, then click the autocomplete match for "Foo Bar" the function detects the value as what was typed (in this case "Foo") as opposed to the value which was selected from the autocomplete list. Once the function fires (in this case I just have an alert box popup with this.value) the value of the input field is set to the value selected via the autocomplete list. This problem does not occur if the user selects the option with the keyboard (arrow keys->tab), only when the mouse is used.
$(function()
{
var aEmps =
[
<?php
echo $sEmps;
?>
];
$("#slast").bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active )
{ event.preventDefault(); }
})
.autocomplete({
source: aEmps,
select: function(event, ui)
{
var aName = $(this).val();
alert(aName);
}
})
});
Since most users will be interacting with this using their mouse I have to find a way to get the value set before firing the "select:" function. I believe I can accomodate for this by adding a condition to the statement prior to the auto complete but I need some help finding the right syntax.

Looking at the documentation, it looks like the select event is fired as the selection is being updated, not after the selection is updated. Try using the change event instead of select, and see if that solves your problem.

After trying a number of approaches I found that by simply binding the callback function to the close event works very well. I added some error handling to catch values that aren't selected from the list and I am off and running!
Here is the updated code:
$(function()
{
var aEmps =
[
<?php
echo $sEmps;
?>
];
$("#slast").bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active )
{ event.preventDefault();}
})
.autocomplete({
source: aEmps,
close: function(event, ui)
{
alert(this.value);
}
})
});