【问题标题】:Issue with x-editable bootstrap 2 typeaheadx-editable bootstrap 2 typeahead 的问题
【发布时间】:2015-07-09 21:56:28
【问题描述】:

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

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

我正在尝试实现 x-editable (bootstrap 2) typeahead 功能。

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

我从 x-editable 文档中获取了完全相同的示例,但是我无法识别的 js 资源中有问题。 Typeahead 未按预期工作。

据我了解,它只需要用于 bootstrap 2 的 bootstrap-editable.js 和 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"];
    }
});

【问题讨论】:

    标签: x-editable


    【解决方案1】:

    我之前使用过他们的示例 (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
        }
    });
    

    【讨论】:

    • typeahead 功能不工作,在输入文本框中输入后我没有看到任何建议。更新 - 我能够使用 bootstrap 3.2.0, jquery-1.9.1, typeahead.js-0.11.1 来实现这一点。感谢您的帮助。
    猜你喜欢
    • 1970-01-01
    • 2012-11-18
    • 2018-04-06
    • 1970-01-01
    • 1970-01-01
    • 2013-08-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多