ิbootstrap3 typeahead autocomplete

download typeahead.js here

demo here

ตัวอย่างการใช้งาน สมมติว่าเลือกประเทศโดย autocomplete แล้วจะให้แสดงจังหวัดที่เกี่ยวข้องทันที

//ajax example
$('#country').typeahead({
   source: function(request, response){
      $.ajax({
          type: "POST",
          url: "{{ URL::to('member/profile/country') }}",
          //data: "{'country_id':'1'}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (json) {
             console.log(json);
             objects = [];
             map = {};
             
             //map label and value
             $.each(json, function(i, object) {
                map[object.label] = object;
                objects.push(object.label);
             });
             return response(objects);
          },
          error: function (msg) {
             alert(msg.status + ' ' + msg.statusText);
          }
      })
   },
   //on select
    updater:function (item) {
       //alert(map[item].value);
       $.ajax({
          type: "POST",
          url: "{{ URL::to('member/profile/zonebycountry') }}",
          data: "{'country_id':"+map[item].value+"}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (msg) {
             console.log(msg);
             $("#province").val(msg);
          },
          error: function (msg) {
             alert(msg.status + ' ' + msg.statusText);
          }
       })
       //dont forget to return the item to reflect them into input
       return item;
    }
    //default no ajax example
    //source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
});

ตัวอย่างข้อมูลประเทศฝั่ง server

public function postCountry(){
           $example = array(
                array(
                    'label' => 'Thailand',
                    'value' => '1001'
                ),
                array(
                    'label' => 'United States',
                    'value' => '1002'
                )

            );

            echo json_encode($example);
        }

Related posts:

This entry was posted in bootstap, jquery, laravel4, php. Bookmark the permalink.