x-editable bootstrap 2 typeahead的问题

发布时间：2020-12-17 21:24:32 所属栏目：安全来源：网络整理

导读：有人可以帮助确定这个问题 – http://jsfiddle.net/xBB5x/8823/ 我正在尝试实现x-editable(bootstrap 2)预先输入功能. 上面的jsfiddle有两个测试. 1)是本地源仿真 2)是ajax仿真(远程数据源) 我从x-editable文档中采用了完全相同的示例,但是我无法识别的js资

有人可以帮助确定这个问题 –

http://jsfiddle.net/xBB5x/8823/

我正在尝试实现x-editable(bootstrap 2)预先输入功能.

上面的jsfiddle有两个测试.
1)是本地源仿真
2)是ajax仿真(远程数据源)

我从x-editable文档中采用了完全相同的示例,但是我无法识别的js资源中存在错误. Typeahead未按预期工作.

根据我的理解,它所需要的是bootstrap 2的bootstrap-editable.js和具有typeahead插件的bootstrap.js(2.3.2)以使其正常工作.

jsfiddle代码根据指南：

HTML

<div>
    <p>Test 1 - local source emulation</p>
<a href="#" id="state" data-type="typeahead" data-pk="1" data-placement="right" data-title="Start typing State.." class="editable editable-click" style="display: inline;">Arizona</a>

</div>
<p/>
<div>
    <p>Test 2 - remote data source emulation/ ajax</p> <a href="#" id="state2" data-type="typeahead" data-pk="1" data-placement="right" data-title="Start typing State.." class="editable editable-click" style="display: inline;">California</a>

</div>

$.fn.editable.defaults.mode = 'inline';

//Test #1 local source emulation
$(function () {
    $('#state').editable({
        source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
    });
});

//Test #2 ajax emulation for the next step (remote data source)
$(function () {
    $('#state2').editable({
        value: 'Alabama',source: function (query,process) {
            return $.post('/typeahead',{
                query: query
            },function (data) {
                return process(data);
            });
        }
    });
});


$.mockjax({
    url: '/typeahead',responseTime: 400,response: function (settings) {
        this.responseText = ["Alabama","Wyoming"];
    }
});

解决方法

我之前( HERE)使用了他们的例子,似乎工作正常. (your updated example)你想要实现的目标还是我错过了什么？

您还可以在JS中设置所有选项,这样更清晰,如下所示：

$('#state2').editable({
    type: 'text',url: '/typeahead',pk: 1,title: 'Enter username',ajaxOptions: {
        dataType: 'json'
    },success: function (response,newValue) {
        //code here
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!