http://www.codeassembly.com/feed/comments/46 CodeAssembly - Simplicity is prerequisite for reliability - Comments en-us contact@codeassembly.com contact@codeassembly.com RSS Feed Generator @Will, thanks for posting the workaround to the down button selecting the second item. Since you mentioned it was inelegant, here's the fix instead of the workaround of adding a changed var. change selected = 0; to selected = -1; in two places (where it's declared up top and in the clear function. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#393 2011-12-05 11:45:27 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#393 How can I preserve the value and the text of the textfield after submission of the textfield after submission ? http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#390 2011-10-31 13:31:29 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#390 @thomas I noticed the same. >>> selected = selected >= size - 1 ? 0 : selected + 1; break; is the problem. To (inelegantly) work around it, I set: >>> var changed=false; up top with the selected and size declarations then changed the above line to >>> selected = selected >= size - 1 || !changed ? 0 : selected + 1; >>> changed = true; >>> break; I also set it to false in the clear() function. Thanks to the 'Humble Programmer' for the original code. Very handy! http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#382 2011-07-13 17:45:50 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#382 The onblur code suggested above has issues with chrome and older versions of IE if your results list requires scrolling. They both fire the blur event if the user scrolls in the autocomplete list, hiding the results! I wound up removing the onblur stuff ( textInput.blur(function(e)...) and instead added live('click') listener to the body. If the event didn't come from within the autocomplete results, I fire the clear() function. Seems to be working well. I put it directly after the clear() function in the code. -------------- $("body").live('click', function (e){ var $t = $(e.target); // is the list even showing? if($('.autocomplete>li').length > 1){ // did it come from within the autocomplete results area? if($t.parents('.form-set-location').length > 1){ return; }else{ clear(); } } }); -------------- http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#381 2011-08-15 17:11:04 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#381 When I press move down (40) the first time, the second item in the list is selected. Does anyone know how to fix it? Many thanks in advance! http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#378 2011-05-30 05:08:23 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#378 When I press move down (40) the first time, the second item in the list is selected. Does anyone know how to fix it? Many thanks in advance! http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#370 2011-05-30 05:08:32 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#370 Yeah.. Thanks, it works perfectly.:) I have modified it become a fancy Facebook Friend Selector. follow this link to see it in action, http://cektkp.com/test/friend/ http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#336 2010-08-16 10:47:52 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#336 its really work mate :) its simple, only provide data on json, and everything will fine :D thanks a lot http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#335 2010-08-11 12:39:50 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#335 This doesn't really work. The dropdown list will show everything everytime i type a keyword, not filtered. what's wrong with this? thankyou http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#334 2010-08-10 15:57:46 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#334 i must say this thing just doesn't work properly in IE8 it often gives a error 'null' is empty or not an object at line 77 in the js-file http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#331 2010-06-19 16:17:13 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#331 When the key is a negative number (-2165162), the value in the hidden input is 0. It is ok on the li value though. Anyone knows what could be going on? Thanks. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#329 2010-05-29 08:47:21 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#329 I need a clear example of how to put aditional data in other inputs, this pluggin is great, but I need to select a name and fill other seven inputs with other data (phone, address, etc) given a unique number, not a name ... I'm clear with JSON, but I can't understand the code of this ... That will be greatly apreciated. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#327 2010-05-22 19:05:58 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#327 Hi, As I can see your plugin is communicating with server side (php script) by GET method. Any possibility to use POST method? It seems script is not passing value from input box if mode_rewrite is enabled. Anybody managed to use this autocomplete with some framework (cake, codeigniter) Thanx in advanced! http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#311 2010-02-18 09:17:41 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#311 Hi, As I can see your plugin is communicating with server side (php script) by GET method. Any possibility to use POST method? It seems script is not passing value from input box if mode_rewrite is enabled. Anybody managed to use this autocomplete with some framework (cake, codeigniter) Thanx in advanced! http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#290 2010-02-18 10:13:15 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#290 Hello!!! Great work!! Thanks a lot... but it isn't really JSON enable, JSON serialized data should be like [{prop1:"value1",prop2:"value2"}] now it expect [{"value1","value2"}]... Also in the getData() function you put inside the loop the assignation handlers for the events (hover, click...) so for every item back from the server, you do the same... Anyway...!!! THANKS AGAIN!!! My function.... function getData(text) { window.clearInterval(typingTimeout); if (text != oldText && (settings.minChars != null && text.length >= settings.minChars)) { clear(); if (settings.before == "function") { settings.before(textInput, text); } textInput.addClass('autocomplete-loading'); settings.parameters.text = text; $.getJSON(url, settings.parameters, function(data) { var items = ''; if (data) { $.each(data, function(index, item) { items += '

' + item.text.replace(new RegExp("(" + text + ")", "i"), "$1") + '

'; }); list.html(items); //on mouse hover over elements set selected class and on click set the selected value and close list list.show().children(). hover(function() { $(this).addClass("selected").siblings().removeClass("selected"); }, function() { $(this).removeClass("selected") }). click(function() { valueInput.val($(this).attr('value')); textInput.val($(this).text()); clear(); }); if (settings.after == "function") { settings.after(textInput, text); } } textInput.removeClass('autocomplete-loading'); }); oldText = text; } } http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#289 2010-02-14 02:03:46 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#289 Man, this is nice but i dont get this work... sort of. I got that demo working perfectly even when i changed query. BUT when i changed 'example' name to 'phone' (field names,ids etc.) Nothing happens...? ajax-php returns right stuf it is something else and i just cant get it. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#284 2010-01-22 09:01:14 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#284 nice one. thanks for sharing. helped me to grab the concept. :) http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#276 2009-12-05 20:27:12 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#276 Hi Excellent work. What i am trying is, I want to call a PHP function in the url When i do so, i get the json output... but it is returned with whole html page structure. (I am using joomla) Any help would be greatful http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#269 2009-11-03 19:34:39 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#269 Amnell I had the same issue this is what i get from firebug in firefox: "$("input#example").autocomplete is not a function" I was loading twice jquery.js and one after initating the autocomplete. Just remove the extra ref to jquery http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#263 2009-08-23 21:59:36 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#263 no matter how hard i try, the z-index of the autocomplete UL does not go above the Google Maps CSS layer. What could be wrong? How do I change the UL.autocomplete z-index? I have changes this in the CSS and it does not do anything. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#262 2009-08-21 12:34:26 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#262 Another note, I just realize there is a big problem with Guido's on select code, in that if its not click by the mouse (and instead the person uses the keyboard) it will not be fired. The solution is to just add: if (typeof settings.onClick == "function"){settings.onClick(valueInput.val(),textInput.val());} in the else if(e.which == 13)//enter } else section, putting it right about the clear worked well for me. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#257 2009-07-27 16:45:39 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#257 Pepe, you are correct, here is another fix for this plugin to make it disappear when focus is lost on the inputbox simply add the line: textInput.blur(function(e) {if(jQuery('.autocomplete:has(.selected)').length == 0){clear();} }) after the click (~line 94) seems to fix it http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#256 2009-07-27 16:02:43 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#256 If the drop down list fills and you click off the field (focus on field blurs) the drop down list remains (needs to go away). http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#252 2009-07-22 08:24:34 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#252 Thanks for the great plugin, and thanks Guido, i needed something on the click event as well. also, if the exact position of the textbox that the autocomplete is on changes before the autocomplete is used, the list will sill show up where it should have been before the change. My solution was to add: list = valueInput.next().css({top: textInput.offset().top + textInput.outerHeight(), left: textInput.offset().left, width: textInput.width()}); between the list.html(items); and the list.show().children(). don't know if thats the best solution, but it seems to be working for me. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#250 2009-07-15 15:34:08 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#250 Hello, This solution dosn't work, if you want to send to save the datas with ajax. I think, this is better: textInput.after('').attr("id", textInput.attr("name") + "_text").attr("name", textInput.attr("name") + "_text"); http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#245 2009-06-29 09:07:33 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#245 Melle posted a bug on 2009-02-14 14:16:08 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#243 2009-06-23 10:50:44 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#243 What the heck... can't get this thing to work... this is what i get from firebug in firefox: "$("input#example").autocomplete is not a function" Anyone know what could be wrong? http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#242 2009-06-22 11:36:56 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#242 I will try out your plugin. It does however not work well in chrome, the position is not directly under the input box, but instead at the end of the page. Perhaps I can try to fix this. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#240 2009-06-11 19:56:03 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#240 I needed a onselect function also. Your code was so clean, it was easy to add. In the section of click(function () you can add : if (typeof settings.onselect == "function") { settings.onselect(valueInput.val(),textInput.val()); } http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#228 2009-04-28 03:37:25 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#228 I found it was very diffcicutl to use without the mouse.. tabbing would pass to the next field and leave the suggestion open i added this line if (e.which == 9) clear(); at the end of this code //set selected item and input values textInput.val( list.children().removeClass('selected').eq(selected).addClass('selected').text() ); valueInput.val( list.children().eq(selected).attr('value') ); now it works just as we are used to, just like the browser autocomplete (wich I defeated with textInput.attr('autocomplete','off'); http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#221 2009-04-11 09:38:23 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#221 Great job .. minimal and very effective ! tnx ! http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#220 2009-04-11 08:39:51 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#220 Any way to make the list appear quicker? it's taking like 3 seconds, an dI would like it to redraw after each keystroke. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#212 2009-03-20 06:37:15 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#212 Excellent code! Found a small bug in lines 61 and 85. if (settings.before == "function") ... should become if (typeof settings.before == "function") ... same for checking of the 'after' function. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#208 2009-02-26 07:15:39 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#208 To remove [Tab] bug, edit the line in "jquery.autocomplete.js": From: else if(e.which == 40 || e.which == 9 || e.which == 38)//move up, down To: else if(e.which == 40 || e.which == 38)//move up, down http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#204 2009-02-14 14:16:08 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#204 Another possible bug, I may have found. When someone types in something not that is not in the json result, and presses [Tab] the input field is cleared. http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#186 2008-12-30 13:28:57 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#186 One apparent bug... if the drop down list fills and you click off the field (focus on field blurs) the drop down list remains (needs to go away). http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#180 2008-12-06 07:36:55 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#180 Thanks a lot!! This is great and was really missing!!! http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#177 2008-11-25 09:40:53 http://codeassembly.com/Unobtrusive-jQuery-autocomplete-plugin-with-json-key-value-support/#177