Joomla (3.x) custom form field type:text with suggestion dropdown

Question

I'm try'n to create a custom form field of type text (or list) where a user can a) type free text and/or b) select from drop-down. Now I found many posts about autocomplete or auto-fill, but that's not what I'm after. I followed the example on how to create a 'City' Custom field here http://docs.joomla.org/J2.5:How_to_add_custom_filters_to_components and this is all working. However, it creates a drop-down only, no option to enter text.

I'm new to the Joomla (3.x) component development, so maybe I am missing something very simple here. With all those field types available, it's hard to belief there is no drop-down with free input.

So 1. can I make the default select/list to accept free text? 2. if not, can I get a pointer on how to get started making one my self? 3. For now, it would be fine to have ~10 city names listed, and free input, no need to filter the city list while typing. But ultimately, I would like to know on how to create a filter while typing Ajax version of this. (Like a suggest input-box)

This is what I use at the moment, the example as linked above I also tried extending Jformfield, with no luck

class JFormFieldCftCity extends JFormFieldList {
    protected $type = 'CftCity';
    public function getOptions() {
        $options = array();

        $db = JFactory::getDbo();
        $query = $db->getQuery(true);

        $query->select('value As value, name As text');
        $query->from('#__bitLuCity AS a');
        $query->order('a.sortOrder');
        $query->where('isEnabled = 1');
        $db->setQuery($query);
        $options = $db->loadObjectList();

        return $options;
    }
}

Thanks

Regards Andreas

Answer 1

For anyone in the same position and future reference I'm going to post my own solution here as I ended up not using @isherwood's suggestion. I have not yet figured out completely how to integrate 'select2' into my component, nor is it needed for simple 'combobox' behavior.

This is HTML5 only, no additional script's, extends a plain JFormField.

It will allow free input, as well as select from the static list and filters while typing.

class JFormFieldCftCity extends JFormField {
    protected $type = 'CftCity';

    public function getInput() {
        $db = JFactory::getDbo();
        $query = $db->getQuery(true);
        $query->select('value As value, name As text');
        ....
        $db->setQuery($query);
        $rows = $db->loadObjectList();
        $control= '<input id="' . $this->id . '" name="' . $this->name 
          . '" list="dataSrc-'. $this->id .'" value="' . $this->value 
          . '" type="text" class="inputbox" />'
          . '<datalist id="dataSrc-'. $this->id .'">';
          for ($i = 0; $i < count($rows); $i++) {
            $control .= "<option value='{$rows[$i]->text}'>{$rows[$i]->text}/option>";
          }
        $control .= '</datalist>';
    return $control;
    }

Answer 2

It did not work in Safari, but I finally found a solution that works in all browsers, until datalist HTML5 markup is supported by all browsers:

<input type="text" class="span6 " style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]" />

You can of course fill "data-source" with data from your query.