当前位置 : 主页 > 网页制作 > Bootstarp >

x-editable bootstrap 2 typeahead的问题

来源:互联网 收集:自由互联 发布时间:2021-06-12
有人可以帮助确定这个问题 – http://jsfiddle.net/xBB5x/8823/ 我正在尝试实现x-editable(bootstrap 2)预先输入功能. 上面的jsfiddle有两个测试. 1)是本地源仿真 2)是ajax仿真(远程数据源) 我从x-editabl
有人可以帮助确定这个问题 –

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>

JS

$.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", "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"];
    }
});
我之前( 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
    }
});
网友评论