jQueryUI

• Autocomplete Widget
• AutoCompleteウィジェットの検索／表示方法をカスタマイズするには？
• jQuery UI - オートコンプリート

source

source#1. 配列

1. 文字列配列

[ "Choice1", "Choice2" ]

2. オブジェクト配列( obj.label, obj.value )

• value = value or label

 [ { label: "Choice1", value: "value1" }, ... ]

source#2. URI

GET source_uri?term=入力文字列

source#3. 関数

source : function(request, response){
	var iput = response.term;
	response([ var1, var2, ...] );
}

Sample with a Django Model

    var entities = {% to_json entities %};		// serializers.serialize('json', entities)

    $( "input.entity-title" ).autocomplete({
      delay: 0,
      source: $.map(entities, function(val, index){
        return { 
            label: val['fields']['name'], 
            value: val['fields']['id'],
            model: val};
      }),
      select: function(e, ui) {
        alert(ui.item.model['fields']['created_at']);  
      }
    });