We Keep Coding

Auto select the top autocomplete result into hidden input

I'm trying to do a search by id, but the autocomplete by name.
So I put an hidden input, that is updated on select.
The problem is that if the user presses Esc or some how initiates a search without selecting, the search fails (doesn't return the desired value), because the hidden value isn't updated. I'm trying to force the autocomplete to choose the top result as long as no other result is selected.
My code is:
$('#search_box').focus(function () {
$(hidden).val("");
});
$('#search_box').autocomplete({
source: "autocomplete_empl.asp",
minLength: 2,
autoFocus: true,
select: function (event, ui) {
$('#hidden').val((ui.item ? ui.item.id : 0));
}
});
Thanks!
P.S
The returned list comes in json form.

I would check if autocomplete val() is empty.
If it is empty do nothing( or you need to select the first value?)
$('#search_box').focus(function () {
$(hidden).val("");
});
$('#search_box').autocomplete({
source: "autocomplete_empl.asp",
minLength: 2,
autoFocus: true,
select: function (event, ui) {
if($('#search_box').val() !== ""){
$('#hidden').val((ui.item ? ui.item.id : 0));
}
}
});
If you need to select the first option just trigger the search event with the data you need
select: function (event, ui) {
if($('#search_box').val() !== ""){
$('#hidden').val((ui.item ? ui.item.id : 0));
}
else{
$('#search_box').autocomplete('search', 'DataYouNeed');
}
}
Here is the link on the API page, which explains it a bit
http://api.jqueryui.com/autocomplete/#method-search

Binding an event to an add dialog select input in jqgrid

I have a jqgrid with the add dialog enabled for adding new rows. The way I would like it to work is that the user will select from a list of drop down items and the item chosen will cause a second drop-down to be populated with data based on the first item.
For example, if my grid had two columns, one for country and one for state, when the user clicked the add button, the country input would be a drop-down, dynamically populated with countries by an ajax call. Then, when the user selects a country, the state drop-down is populated based on the country selected.
Currently I am doing something like the following:
beforeProcessing: function () {
var allcountries = ajaxcall();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
},
loadComplete: function () {
$('#Countries').change(function () {
// States will be populated here
alert("changed");
});
}
The first part in beforeProcessing works fine and the countries drop-down is populated as expected. However, the event in loadComplete does not get attached to the select input with id the 'Countries' and the alert never occurs. It seems that the select object has not yet been created with loadComplete fires, but if that is the case I'm not sure where to place the logic where the states will be populated.
Any ideas?

jqGrid has no direct support of depended selects, but in the answer you will find the implementation of the scenario. The most problem is that the code is not small, but it's quickly to analyse a working code as to write your own one.

I ended up doing something like the following, its a bit redundant but it works and isn't too code heavy:
First, in the beforeProcessing callback, I populate both the countries and states drop-downs with their initial values:
beforeProcessing: function () {
var allcountries = ajaxCallToFetchCounties();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
var states = ajaxCallToFetchStates();
$('#clientReportsGrid').setColProp('States', { editoptions: { value: states , class: 'edit-select' }, editrules: { required: true, edithidden: true} });
}
Then in the pager's add option, I used the beforeShowForm callback to attach a method to the change event of the countries select input, and within that method I fetch the states based on the current country and repopulate the select control:
beforeShowForm: function (form) {
$("#Countries").unbind("change").bind("change", function () {
var states = ajaxCallToFetchStates();
//Manually clear and re-populate the states select box here with the new list of states.
});
$('#tr_AccountCode', form).show();
}

How to implement toggle functionality on JQuery UI Selectable?

I'm using JQuery UI - Selectable. I want to deselect the element if it has been pressed and it has already been selected (toggle)
Could you help me to add this functionality please !

Because of all the class callbacks, you're not going to do much better than this:
$(function () {
$("#selectable").selectable({
selected: function (event, ui) {
if ($(ui.selected).hasClass('click-selected')) {
$(ui.selected).removeClass('ui-selected click-selected');
} else {
$(ui.selected).addClass('click-selected');
}
},
unselected: function (event, ui) {
$(ui.unselected).removeClass('click-selected');
}
});
});

You already have that functionality with jQuery UI selectable if you're holding down the Ctrl key while clicking.
If you really need that as the default functionality, you don't need to use selectable, you can do it just as a simple onclick handler, like what nolabel suggested.
Or... you might as well edit jquery.ui.selectable.js and add an option which does just what you need. Shouldn't be too hard, there are 4 places where event.metaKey is checked, make sure if your option is set, just run the codepaths as if event.metaKey was always true.
As the selectables could use some more customisation, you could also make a feature request for jQuery UI developers to include it in the next official version.

You have to inject two simple elements in the code to achieve what you want. This just inverts the metaKey boolean, whenever you need inverted/toggle functionality.
options: {
appendTo: 'body',
autoRefresh: true,
distance: 0,
filter: '*',
tolerance: 'touch',
inverted: false /* <= FIRST*/
},
_mouseStart: function(event) {
var self = this;
this.opos = [event.pageX, event.pageY];
if (this.options.disabled)
return;
var options = this.options;
if (options.inverted) /* <= SECOND*/
event.metaKey = !event.metaKey; /* <= SECOND*/

Working example of jeditable and autocomplete working together

I see a lot of google posts on this but all seems to be talking about how this is in progress. Does anyone know of a working version of jeditable and autocomplete functionality working together so i can click on text and get a textbox and have autocomplete functionality working against that textbox
EDIT:
I am opening a bounty, as it still seems like none of these solutions replicate Stack overflow tags + jeditable where i can use jeditable to get a editable texbox after clicking on text and then be able to enter a comma separated list that autocomplete each entry as i type (similar to entering tags in stack overflow).

Take a look at this
JQuery Based Inplace Editing + AutoComplete
Usage
$('#edit').editable( 'echo.php', // POST URL to send edited content
{ indicator : , // options for jeditable
event: 'click' // check jeditable.js for more options
},
{ url: "search.php", //url form where autocomplete options will be extracted
minChars: 1, // check autocomplete.js for more options
formatItem:formatItem,
selectOnly: 1,
inputSeparator:';' // a new option of inputSeparator was introduced.
}
);
You can use ',' as input separator.

This is exactly what Jeditable custom inputs are for. Check quick and dirty
working demo (start typing something starting with letter a).
Demo was done in 5 lines of code. It uses Jörn Zaefferer's Autocomple plugin for autocompletion:
$.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
$('input', this).autocomplete(settings.autocomplete.data);
}
});
Then you can call Jeditable with something like:
$(".autocomplete").editable("http://www.example.com/save.php";, {
type : "autocomplete",
tooltip : "Click to edit...",
onblur : "submit",
autocomplete : {
multiple : true,
data : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
}
});

I had the need for the same functionality with jeditable and autocomplete from bassistance, for a list of emails separated by a comma. So, I changed the demo from Mika Tuupola and had it working like this:
$.editable.addInputType('autocomplete', {
element: $.editable.types.text.element,
plugin: function(settings, original) {
$('input', this).autocomplete(settings.autocomplete.urlOrData,
settings.autocomplete.options);
}
});
And when you call jEditable you need to add the following:
$('.autocomplete').editable('http://www.example.com/save', {
type: 'autocomplete',
autocomplete: {
urlOrData: ["Aberdeen", "Ada", "Adamsville"] , // can also be url: 'http://www.example.com/autocomplete',
options: {
multiple: true
}
}
});
The basic thing to understand here is that when you call $('input', this).autocomplete(...) you are actually applying the autocomplete plugin functionality to the editable input, and that's where you must pass the autocomplete options, via the settings object, which is the same as the settings you pass to jeditable.

Editable: jQuery jeditable I've used it recently in my project (as such and with slight modification to work with page methods)
AutoComplete: bassistance

Combining it with jQuery UI isn't much different to Mika's example above. This works for me
$.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
$('input', this).autocomplete(settings.autocomplete);
}
});
$(".autocomplete").editable("http://www.example.com/save.php", {
type : "autocomplete",
tooltip : "Click to edit...",
onblur : "submit",
autocomplete : {
minLength : 2,
source : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
}
});

Complete working integration of dataTable, dataTables editable (legacy), jEditable, autocomplete jQuery plugins with AJAX source and results updated at bottom on page(i.e. appended to body of html) is solved by:
$.editable.addInputType('autocomplete', {
element: $.editable.types.text.element,
plugin: function(settings, original) {
var $row = $(this).closest('tr').prop('id');
settings.autocomplete.appendTo = "#results-"+$row;
$('input', this).autocomplete(settings.autocomplete);
}
});
Datatable legacy editable code:
{
tooltip: 'Click to update Owner',
type: 'autocomplete',
autocomplete: {
serviceUrl: './search/users/by/name',
minChars: 5,
paramName: 'username',
dataType: 'json'
},
cancel : 'Cancel',
submit : 'Submit',
}
TD in table have:
<td id="results-${obj.taskId}">

jQuery autocomplete to get unused value

In my ASP.Net MVC application I have a jQuery autocomplete on a text box. I have everything working to display currently used item names and what I want to do is force the user to enter a completely NEW item name. I.e. the autocomplete acts as a guide to what exists but the user must ultimately enter a completely used string value.
I want the UI to signal if a currently used item is selected (there will be anther check on the server side when submit is posted) so for the moment there is just a simple alert().
My script is as follows:
$(document).ready(function() {
$('#combobox').autocomplete('<%= Url.Action("ProjectIdList", "LookUp") %>', {
delay:10,
minChars:1,
matchCase: 0,
matchSubset: 1,
autoFill: true,
maxItemsToShow:10,
cacheLength: 10,
onItemSelect:selectItem,
onFindValue:selectItem
});
});
Please note the markup:
onItemSelect:selectItem, onFindValue:selectItem
I have further script as follows:
function findValue(li) {
if (li != null) return alert("This Project Id cannot be used");
}
function selectItem(li) {
findValue(li);
}
However, I cannot get these events to fire. What am I missing?
Alternatively, is there a better way to do this?

I have used
$("combobox").result(function(item){
if(!item)
{
//no match
}
});
with some success with the official plugin.

Full final code for this to help anyone who needs it was as follows:
$(document).ready(function() {
$('#combobox').autocomplete('<%= Url.Action("ProjectIdList", "LookUp") %>',
{
delay: 10,
minChars: 1,
matchCase: 0,
matchSubset: 1,
autoFill: true,
maxItemsToShow: 10,
cacheLength: 10
}
);
$('#combobox').result(function(item) {
if (item) {
//no match
alert("Not this one!");
}
});
});