Input with Typeahead.js can't re-send (POST via Bloodhound) to remote json

Question

Using typeahead.bundle.js 0.10.2 I am having trouble getting the latest input a user has typed, into the bloodhound ajax query. I'm POSTing json, and receiving as json successfully, but not able to "get" the latest user query to post it.

I have a dropdown menu of product categories and an input field for the product search. Combined, a user can search for a product in all categories, or search for the product within a single category.

Here's my current code: http://jsfiddle.net/jamcow/b43T9/

As the initial value of #productSearch.val() is empty, that's what goes into the ajax query. https://github.com/twitter/typeahead.js/issues/542 comes close, but I don't see a way to give it the latest queryInput.val()

ajax: {

    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",

    data: JSON.stringify({
        partialSearchString: searchInput,
        category: searchCategoryInput
    }),
    success: function (data) {
        console.log("we got data:");
        console.log(data);
    }
}

$('#searchproducts').typeahead(null, {
    name: 'products',
    displayKey: 'Value',
    source: products.ttAdapter()
})

Have tried using products.clear(); and products.initialize(true); as well

What's the best way to get the current query into the ajax request?

https://stackoverflow.com/a/46927923/3966458 this works – Saahithyan Vigneswaran Oct 25 '17 at 08:51 — Saahithyan Vigneswaran, Oct 25 '17 at 08:51

score 1 · Answer 1 · answered Oct 22 '15 at 11:10

After hours of trying to look for solution finally i managed to have this.In the latest version 0.11.1 this has been changed where you can specify the transport.

See this implementation

//input field to handle typehead.js

 <div class="col-sm-9" id='#custom-templates'>
                                <input type="text" aria-required="true" id="tender_name" name="tender_name" placeholder="Hospital Name"  required class="form-control" class="typeahead tt-input"/>
                                <img class="spinner-name" src="<?php echo base_url(); ?>components/TEMPLATES/leftsidebar/light/images/loaders/nhif/spinner.gif" style="display: none;">
                            </div>

initialize Bloodhound

var facility_name = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,

            remote: {
                url: "<?php echo base_url('hospital/hospitals/'); ?>/search#%QUERY",
                wildcard: '%QUERY',
                transport: function (opts, onSuccess, onError) {
                    var url = opts.url.split("#")[0];
                    var query = opts.url.split("#")[1];
                    $.ajax({
                        url: url,
                        dataType:'json',
                        data: {
                            'search': query,
                            'column':'name'
                        },
                        type: "POST",
                        async: true,
                        beforeSend: function(xhr){
                            $('.spinner-name').css('display', 'block');
                        },
                        success: onSuccess,
                        error: onError,
                        complete: function(xhr){
                           $('.spinner-name').css('display', 'none');
                        }
                    })
                }
            }
        });

        facility_name.initialize();
$('#tender_name').typeahead({
              hint: true,
              highlight: true,
              minLength: 1,
            }, {
            name: 'facility_name',
            displayKey: 'name',
            source: facility_name.ttAdapter(),
            limit: 10,
            templates: {
                suggestion: function (data) {
                    return '<p>#' + data.code + ' - '+data.name+'</p>';
                }
            },
            engine: Hogan //needed for the templating
        }).bind('typeahead:select', function (ev, suggestion) {
            $('#hospital_code').val(suggestion.code);
            $('#state').val('1');

        });

controller

function Hospitals($val=''){

    echo json_encode($this->tender_model->_GetHospitalData());

}

//model

   function _GetHospitalData(){

    $data = $this->input->post('search');
    $column = $this->input->post('column');

    //var_dump($this->input->post());die();


    $this->db->select('name,code');
    $this->db->from('facility_info');
    $this->db->like("LOWER($column)", strtolower($data));
    $query = $this->db->get();

    $hospital_array = array();
    foreach ($query->result() as $row) {
        $hospital_array[] = $row->$column;
    }
    //return $hospital_array;
    return  $query->result_array();
}

Input with Typeahead.js can't re-send (POST via Bloodhound) to remote json

1 Answers1