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);
}
});
});
Related
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>
I'm looking for a way to show/hide divs based on the jQuery autocomplete search results.
This is the autocomplete function I have:
$('#catalogSearch .searchBox').mouseup(function (e) { e.preventDefault(); }).autocomplete({
source: services,
autoFill: true,
minChars: 0,
focus: function (event, ui) {
event.preventDefault(); // Prevent ui.item.value from showing up
$('#catalogSearch .searchBox').val(ui.item.label);
return false;
},
select: function (event, ui) { // Triggered when an item is selected from the menu?
$('#catalogSearch .searchBox').val(ui.item.label);
window.location.href = ui.item.value.find("a").attr("href");
return false;
},
open: function () { $('.ui-menu').css('max-width', '100%') }
})
The source 'services' is just an array of objects with label & value. Basically, I want to filter out my divs based on the autocomplete results (the list that shows up on .ui-menu-item) as shown here:
before & after
(In case if the images don't work)
My html looks like this:
<div id="catalogSearch">
...
<input type="text" class="searchBox ui-autocomplete-input ...>
<input id="catalogSearchSubmit" class="searchSubmit" type="submit">
...
</div>
<div class="row">
...
<div id="product-apple">...</div>
<div id="product-banana">...</div>
<div id="product-cherry">...</div>
<div id="product-melon">...</div>
<div id="product-pineapple">...</div>
<div id="product-kiwi">...</div>
...
</div>
And basically, I want to use this filtering function (or something like this):
var filterResults = function () {
var results = $('.ui-menu-item');
$('.product-list.item').hide();
results.each(function (r) {
$('#product-' + $(this).text()).show();
});
};
and show only relevant divs. For example, if I search "pl", I would only want to see div "apple", "pineapple" & "plum." I tried to add it as a part of the search event but seems it doesn't work. Is there any way I can do it within the autocomplete scope?
Thank you for your answer in advance!
What I would do is something like this :
function search(value){
//$(elems) == your divs selector
$(elems).hide();
$(elems).each(function(){
if($(this).html().match(value)){
$(this).show();
}
});
}
You can get read rid of your divs id.
Then use this search function inside jq autocomplete focus and/or select and give it ui.item.label value, which might be the value you're looking for.
Note : As all your possible results are already loaded on page, I don't see the point of autocomp as you can get this search function to work instantly like this
$('.searchBox').keyup(function(){ search( $(this).val() ) }
I have a dynamic input field created with class name as sub-category.
On key press autocomplete is working fine, from which i can select one.
Working code for that is below
$("body").on('keypress', 'input.sub-category', function () {
var availableTags = [
{label:"ActionScript", value:"1"},
{label:"ActionScript1", value:"11"},
{label:"ActionScript2", value:"12"},
{label:"ActionScript3", value:"13"},
{label:"ActionScript4", value:"14"},
];
$(this).autocomplete({
source: availableTags,
});
});
When i select one of the autosuggested text say 'ActionScript', it's value (1) should be available in the below code, how i can access it? On select alert function is working fine, so just need to know how to access value of the selected label.
$("body").on('autocompleteselect', 'input.sub-category', function () {
alert('here');
});
In addition to that i would like to know how to set the selected text in the input box rather than it's value.
you need to include jquery-ui file
"https://code.jquery.com/ui/1.12.0/jquery-ui.js" in your file
and
just replace
$("body").on('autocompleteselect', 'input.sub-category', function () {
alert('here');
});
with the following lines.
$("body").on('autocompleteselect', 'input.sub-category', function (event,ui) {
alert(ui.item.label);
alert(ui.item.value);
});
and
$(this).autocomplete({
source: availableTags,
});
with
$(this).autocomplete({
source: availableTags,
select:function(event,ui){
$(".sub-category").val(ui.item.label);return false;
}
});
and this will work fine for more info please go on following link
http://api.jqueryui.com/autocomplete/
More than easy!
It's here http://api.jqueryui.com/autocomplete/#event-select
And it says, that You may bind handler in such manner
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );
where ui is Object which has item which in turn has selected label and value data.
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
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);
}
})
});