jQuery Combobox select autocomplete

Question

Does a jQuery plug-in exist for replacing select combo box   I tried SexyCombo  and it is as close to what I want  but it doesn t complete if you are writing from middle  only from beginning   I have 2 levels of categories  20 top level categories  and with subcategories in total 120 categories   so when user is submitting an entry  he must find desired category as soon as possible   So    2 levels   autocomplete populate text even if you write middle letters   Or any other solution

User · Answer

Have a look at the following example of the jQueryUI Autocomplete, as it is keeping a select around and I think that is what you are looking for. Hope this helps.

http://jqueryui.com/demos/autocomplete/#combobox

User · Answer

This works great for me and I m doing more  writing less with jQuery s example modified   I defined the select object on my page  just like the jQuery ex  I took the text and pushed it to an array  Then I use the array as my source to my input autocomplete  tadaa     function        var mySource              mySelect   children  option   map function           mySource push   this  text                    myInput   autocomplete         source  mySource        minLength  3

User · Answer

I know this has been said earlier  but jQuery Autocomplete will do exactly what you need  You should check out the docs as the autocomplete is very customizable  If you are familiar with javascript then you should be able to work this out  If not I can give you a few pointers  as I have done this once before  but beware I am not well versed in javascript myself either  so bear with me on this   I think the first thing you should do is just get a simple autocomplete text field working on your page  and then you can customize it from there   The autocomplete widget accepts JSON data as it s  source   option  So you should set-up your app to produce the 20 top level categories  and subcategories in JSON format   The next thing to know is that when the user types into your textfield  the autocomplete widget will send the typed values in a parameter called  term    So let s say you first set-up your site to deliver the JSON data from a URL like this    categories json   Then your autocomplete source  option would be  source   categories json    When a user types into the textfield  such as  first-cata     the autocomplete widget will start sending the value in the  term  parameter like this    categories json term first-cata   This will return JSON data back to the widget filtered by anything that matches  first-cata   and this is displayed as an autocomplete suggestion   I am not sure what you are programming in  but you can specify how the  term  parameter finds a match  So you can customize this  so that the term finds a match in the middle of a word if you want  Example  if the user types  or  you code could make a match on  sports    Lastly  you made a comment that you want to be able to select a category name but have the autocomplete widget submit the category ID not the name   This can easily be done with a hidden field  This is what is shown in the jQuery autocomplete docs   When a user selects a category  your JavaScript should update a hidden field with the ID   I know this answer is not very detailed  but that is mainly because I am not sure what you are programming in  but the above should point you in the right direction  The thing to know is that you can do practically any customizing you want with this widget  if you are willing to spend the time to learn it   These are the broad strokes  but you can look here for some notes I made when I implemented something similar to what you want in a Rails app   Hope this helped

User · Answer

edit  The lovely chosen jQuery plugin has been bought to my attention  looks like a great alternative to me   Or if you just want to use jQuery autocomplete  I ve extended the combobox example to support defaults and remove the tooltips to give what I think is more expected behaviour  Try it out    function             widget  ui combobox              create  function                  var input                that   this                wasOpen   false                select   this element hide                  selected   select children   selected                  defaultValue   selected text                        wrapper   this wrapper       lt span gt                     addClass  ui-combobox                    insertAfter select                function removeIfInvalid element                    var value     element  val                      matcher   new RegExp         ui autocomplete escapeRegex value          i                      valid   false                  select children  option   each function                          if    this  text   match matcher                             this selected   valid   true                          return false                                                             if   valid                           remove invalid value  as it didn t match anything                       element  val defaultValue                       select val defaultValue                       input data  ui-autocomplete   term                                                    input       lt input gt                   appendTo wrapper                 val defaultValue                 attr  title                      addClass  ui-state-default ui-combobox-input                  width select width                   autocomplete                     delay  0                    minLength  0                    autoFocus  true                    source  function  request  response                          var matcher   new RegExp   ui autocomplete escapeRegex request term    i                          response select children  option   map function                                var text     this  text                              if  this value  amp  amp    request term    matcher test text                                  return                                     label  text replace                                      new RegExp                                               amp          lt    lt  gt                                                 ui autocomplete escapeRegex request term                                                  lt  gt    gt        amp          gi                                           lt strong gt  1 lt  strong gt                                       value  text                                    option  this                                                                                                    select  function  event  ui                          ui item option selected   true                        that  trigger  selected   event                              item  ui item option                                                                  change  function  event  ui                          if   ui item                              removeIfInvalid this                                                                               addClass  ui-widget ui-widget-content ui-corner-left                 input data  ui-autocomplete    renderItem   function  ul  item                    return     lt li gt                       append   lt a gt     item label     lt  a gt                       appendTo ul                                   lt a gt                   attr  tabIndex   -1                 appendTo wrapper                 button                     icons                          primary   ui-icon-triangle-1-s                                         text  false                                 removeClass  ui-corner-all                  addClass  ui-corner-right ui-combobox-toggle                  mousedown function                        wasOpen   input autocomplete  widget   is   visible                                    click function                        input focus                          close if already visible                   if  wasOpen                          return                                            pass empty string as value to search for  displaying all results                   input autocomplete  search                                               destroy  function                  this wrapper remove                this element show                         jQuery

User · Answer

jQuery 1 8 1 has an example of this under autocomplete  It s very easy to implement

[select] jQuery Combobox/select autocomplete?

Examples related to select

Examples related to jquery-plugins

Examples related to combobox

Examples related to autocomplete