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

VideoCapture camera = new VideoCapture(0);

初始化Bloodhound

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

}

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

1 个答案: