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;
    }