I'm using the autocomplete combobox from the jQuery UI library to create a couple text fields that also accept dropdowns -- basically a hybrid text/dropdown input. I customized it though so it also accepts free text input, not just items in the dropdown array.
When the user selects an item from the dropdown, I'd like to trigger a function that populates the rest of the form based on the input. I don't want this function to trigger when the user types in a value manually. I'm not sure though how to bind an event specifically to the user selecting an item from the dropdown.
Here's a Fiddle: http://jsfiddle.net/AhDHk/
HTML:
<input type="text" name="realtor-name" id="lp-realtor-name" value="" class="text ui-widget-content ui-corner-all" />
JS:
// adds the dropdown, dropArray is the list of items for the dropdown, id is the ID of the html input.
function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");
$("<button type='button'> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter($input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon lp-drop-button")
.click(function() {
// close if already visible
if ($input.autocomplete("widget").is(":visible")) {
$input.autocomplete( "close" );
return;
}
$(this).blur();
$input.autocomplete("search", "" );
$input.focus();
});
$("form").submit(function(e) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
alert($(this).serialize());
});
}
Here is how you can handle it:
var $input = $(id).autocomplete({
source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
minLength: 0,
select: function(event, ui) { alert('test');}
}).addClass("ui-widget ui-widget-content ui-corner-left");
Possible duplicate of: jQuery UI Autocompleteselect
The select event, here.
function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
minLength: 0,
select:function(a,b){
alert(b.item.value + 'selected');
}
}).addClass("ui-widget ui-widget-content ui-corner-left");
Related
Given the documentation for the search method for the Autocomplete Widget, I would expect a button that calls this method would display a box containing a list of available selections. Nothing happens.
I have the following code that creates the autocomplete widget on a text box:
$("#StateListCoolBox").autocomplete({
source: StateListCoolBoxTags,
focus: function( event, ui ) {
$("#StateListCoolBox").val(ui.item.label);
return false;
},
select: function( event, ui ) {
$("#StateListCoolBox").val(ui.item.label);
$("#StateListCoolBox-id").val(ui.item.value);
return false;
}
});
It works fine.
I have the following code attached to the button I want to display the list. It gets called but nothing happens:
function StateListCoolBox_dropDownClick() {
$("#StateListCoolBox").autocomplete("search", "" );
};
I have tested this with text in the corresponding textbox and with the textbox blank.
How do I get a button to behave like the button on a DropDown Combo, so that when clicked, the list of available selections is displayed?
If you look at the "View Source" for this: http://jqueryui.com/autocomplete/#combobox
You will see:
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.on( "mousedown", function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.on( "click", function() {
input.trigger( "focus" );
// Close if already visible
if ( wasOpen ) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
}
So this shows all the results by triggering focus event on the text field.
How do I get a button to behave like the button on a DropDown Combo, so that when clicked, the list of available selections is displayed?
I think this fits what you wanted to accomplish. So Try the following with minLength: 0:
function StateListCoolBox_dropDownClick() {
$("#StateListCoolBox").trigger("focus").autocomplete( "search", "" );
};
That said, there should be nothing wrong with your method:
Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.
Your current code is simply missing: minLength: 0. Try both if you like.
jsFiddle for the interactive example
I have an auto-complete box similar to the example. If you start typing a name, that begins with M it will give you a drop-down list. If arrow down through the names (rather than selecting one with your mouse), you will notice, that the input box gets filled with the value rather than the name of the person.
HTML:
<input type="text" id="myInput" placeholder="Type M...">
<input type="hidden" id="myHidden">
Script:
$("#myInput").autocomplete({
delay: 500,
minLength: 1,
select: function(e, ui) {
$(this).val(ui.item.label);
$("#myHidden").val(ui.item.value);
return false;
},
source: [{"label":"Marie","value":1},
{"label":"Michelle","value":2},
{"label":"Mia","value":3},
{"label":"Melissa","value":4},
// ...etc
];
});
When you select a name, it adds it to the input correctly, but I'm trying to get rid of the numerical values being displayed as you arrow through the choices.
I didn't see any event in the auto-complete docs to hook into accomplish this.
May I have missed it or perhaps there is a way of restructuring my source data to prevent this?
Solution:
$("#myInput").autocomplete({
delay: 500,
minLength: 1,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
$("#myHidden").val(ui.item.value);
return false;
},
focus: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
},
source: [{"label":"Marie","value":1},
{"label":"Michelle","value":2},
//...
{"label":"Maureen","value":40}]
});
JSFiddle demo
I'm using selectable() from jQuery it works just the way i want it.
But i want to go to the next step, i want it to select the message too inside the main chat.
So the text of the selected nickname will highlight too in the main chat.
JsFiddle http://jsfiddle.net/56SkH/13/
UPDATE
What i wanna to do is that when Nickname is selected from users that the channelmessage automaticly is being selected from the users.
$(function() {
$('#users').selectable({
selected: function(event, ui) {
var user = ui.selected.id.toLowerCase();
$('.channelmessage.'+user).addClass('ui-selected');
},
unselected: function(event, ui) {
$('.channelmessage').removeClass('ui-selected');
},
});
});
DEMO: http://jsfiddle.net/56SkH/23/
Try this - On click of each name corresponding message also selected using 'stop' property of selectable().
$(function () {
$("#users").selectable({
stop: function () {
$("#users li").each(function (key) {
$("#Nickname" +(key+1)+ "_message").css({"background":"white","color":"black"});
});
$(".ui-selected", this).each(function (key) {
var index = $( "#users li" ).index( this );
$("#Nickname" +(index + 1)+ "_message").css({"background":"#F39814","color":"white"});
});
}
});
});
It's easy to add a dummy class to each chat message, and the selector will be more efficient than searching for a name string.
$(function() {
$( '#users').selectable({
filter: "li",
selecting: function( event, ui ) {
$(".ui-selected").removeClass("ui-selected");
$('.channelmessage span.message.' + ui.selecting.id).addClass("ui-selected");
}
});
});
Here you have a working JSFiddle sample:
http://jsfiddle.net/56SkH/21/
You can force the selection on the element by adding the class ui-selected and using the selected event:
$(function () {
$('#users').selectable({
selected: function (event, ui) {
$(".channelmessage span.nickname.ui-selected").removeClass("ui-selected");
$(".channelmessage span.nickname:contains('" + ui.selected.id + "')").addClass("ui-selected");
}
});
});
In the example I use the span content as contains selctor, by I have modified a bit the HTML markup like:
<p class="channelmessage"> <span class="nickname">Nickname2</span><span>:</span>
<span class="message">Message</span>
</p>
Demo: http://jsfiddle.net/IrvinDominin/LnnLT/
Here i am trying to do is on on-click of radio button list-box had to display with auto-complete but its not clear on-click ..so how to change according to radio button and display it..with auto complete properly
<script>
(function ($) {
$.widget("custom.combobox", {
_create: function () {
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function () {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.attr("id", "sss")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
Look at this link
For starters, it never actually alerts "maingroup", when you select that radio button.
This means that there's something wrong with:
if($('input:radio[name=A]:checked').val()=="maingroup"){...}
and that problem is that input:radio is not a valid jquery selector.
Use this instead:
if($('input[name=A]:checked').val()=="maingroup"){...}
(you do it a couple of times throughout your code)
Check out what happens with that. If you're still having trouble, it means there's more errors... Keep your fiddle updated in that case.
I'm using the jQuery UI's "autocomplete" function on a search on my site. When you change a radio button from 'area search" to "name search" I want it to disable the autocomplete, and re-enable it when you switch back. However, when you disable the autocomplete it doesn't hide the dropdown, it just dims it to 20% opacity or so. Here's my javascript:
var allFields = new Array(<?php echo $allFields ?>);
$(document).ready(function() {
if ($("input[name='searchType']:checked").val() == 'areaCode') {
$("#siteSearch").autocomplete({
source: allFields,
minLength: 2
});
}
$("input[name='searchType']").change(function(){
if ($("input[name='searchType']:checked").val() == 'areaCode') {
$( "#siteSearch" ).autocomplete( "option", "disabled", false );
alert("enabled");
}
else {
$( "#siteSearch" ).autocomplete( "option", "disabled", true );
alert("disabled");
}
});
});
You can see it happening at http://crewinyourcode.com
First you have to chose an area code to search, and then you can see the issue.
EDIT:
I realize you have to choose an area code before you're given the option to switch search types. If you go to this URL you'll have both of them immediately:
http://crewinyourcode.com/search/choose-category/732/
Just added a CSS rule to display:hidden the autocomplete box. No biggie.