Typeahead.js 的输入无法重新发送（通过 Bloodhound 发布）到远程 json

Question

使用 typeahead.bundle.js 0.10.2 我无法将用户输入的最新输入输入到 Bloodhound ajax 查询中。我正在发布 json，并成功接收为 json，但无法“获取”最新的用户查询来发布它。

我有一个产品类别下拉菜单和一个用于产品搜索的输入字段。结合起来，用户可以在所有类别中搜索产品，或在单个类别中搜索产品。

这是我当前的代码：http://jsfiddle.net/jamcow/b43T9/

由于#productSearch.val() 的初始值为空，这就是ajax 查询的内容。 https://github.com/twitter/typeahead.js/issues/542 接近了，但我没有办法给它最新的 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()
})

也尝试过使用products.clear(); 和products.initialize(true);

将当前查询放入 ajax 请求的最佳方法是什么？

Answer 1

经过数小时的尝试寻找解决方案，我终于找到了这个。在最新版本 0.11.1 中，这已更改，您可以在其中指定传输。

查看此实现

//处理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>

初始化寻血猎犬

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');

        });

控制器

function Hospitals($val=''){

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

}

//模型

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