PHP Autocomplete - Notes & Gotchas

• Select2 can attach to either hidden input element or text input. If it's a select, Select2 essentially transforms SELECT element into combination of TEXT INPUT and UL tags. Using browser developer tool, view it's source.
• Sample: <div class="select2-drop select2-display-none select2-with-searchbox select2-drop-active" style="left: 68px; width: 300px; top: 1251.5px; bottom: auto; display: none;"> <div class="select2-search"> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input select2-focused" maxlength="9999"> </div> <ul class="select2-results"></ul> </div> The implication is that it cannot use SELECT related jQuery method. For example to empty the selection
  instead of

  $("#state").val();

  use

  $("#state").select2("val", null);

• Select2 initSelection function
• Notice that in order to set/get value using "val" you must define the initSelection function in the options, so that Select2 knows how to transform the id of the object you pass in val() to the full object to render selection. If you are attaching to a select element, this function is already provided for you. initSelect essentially does id->object mapping. Ref: http://ivaynberg.github.io/select2/index.html. initSelection will only be called when there is initial input to be processed.
• 'initSelection' is not allowed for Select2 when attached to a SELECT element.
• The 2nd way to set the value is to directly set the "value" attribute in INPUT element.
• Select2 uses jQuery's $.ajax function to execute the remote call by default. An alternative transport function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom query function instead of using the ajax helper.
• Tags are the simplest form of data where the id is also the text.
• It is recommended to use HIDDEN INPUT whenever possible because HIDDEN INPUT is more versatile such as setting a dynamic value.