テキスト入力もできるセレクトボックスを一番簡単に作る

やりたいこと

mysqlのテーブルデータを元にしたリストボックスを作りたい。
さらにリストにないデータも入力できるようにしたい。

条件的なモノ

・言語:php + smarty
・jquery 可
・使い方がシンプル
・コード量が少なくていい
・IE対応

採用した方法

上記理由により jquery-ui の autocomplete を採用しました。

デフォのデザインがあまりイケてませんがｗ
css上書きすればいいだけですしね。

使い方

autocomplete は数文字入力して候補を表示させる使い方が一般的ですが
minLength: 0指定と.focusメソッドを同時に使うことで
セレクトボックスのようにフォーカス時に未入力でも候補を表示することができます。

autocomplete用のsourceの渡し方もajaxとかjsonとか使っても良かったんですが、シンプルにPHPでカンマ区切りのデータ($name_list)を作ってsmartyでhiddenに渡しました。

※PHPでデータ作る部分は端折りました。

html

<input type="text" id="select_name" name="select_name">
<input type="hidden" name="name_list" id="name_list" value="{$name_list}">

javascript

$(function(){
  var list_str = j$( "#name_list" ).val();
  var list = list_str.split(',');

  $( "#select_name" ).autocomplete({
    minLength: 0,
    source: list
  }).focus(function() {
    $(this).autocomplete("search", "");
  });;
});

今どきのやり方ではないとは思うのですが、ご参考までに。

業務外とかIE考えなくてよければHTML5のinputでやりたいとこでした。