typeahead.js替换asp.net下拉列表键/值

时间:2013-11-18 21:41:13

标签: jquery asp.net typeahead.js

我的目标是使用typeahead.js替换asp.net下拉列表。我有一个asp.net Web服务,它返回一个用json编码的总帐帐户列表,下面是一个例子:

[" 10000 - 测试帐户"," 10001 - 测试帐户2"]

使用标准的asp下拉列表我可以将Name属性分配给" 10000 - 测试帐户"并且value属性为1(无论我的数据库中是什么ID)。当我点击"添加"按钮我将使用总帐项的值。我可以轻松地修改我的webservice以返回每个对象的名称和ID,但是我不知道如何修改我的预先输入代码以存储我的数据库中每个项目的id值以及我如何检索该值选择GL。此时我唯一的解决方案是对名称的前5个字符进行子串,并进行另一个数据库查找,但它看起来很麻烦。任何意见都将不胜感激。

来自网页的快照 Image

预先输入代码

   $(document).ready(function () {
        $('.typeahead').typeahead([
              {
                  name: 'theName',
                  remote: '/webservice.asmx/GetGLS?query=%QUERY',
                  limit: 10
              }
        ]);
    });  

1 个答案:

答案 0 :(得分:3)

您可以简单地发回一个JSON数组,其中包含每个建议的值和数据。

有一个名为typeahead的自定义事件:已选中,您可以挂钩。以下是本地数据源的示例。希望这会对你有所帮助

http://jsfiddle.net/2yeW7/

HTML:

<input class="typeahead" type="text" placeholder="test">
<input type="button" value="TEST" id="btn" />

使用Javascript:

$(document).ready(function () {
    var selected = null;
    $('.typeahead').typeahead({
        name: 'countries',
        local: [{
            value: 'CASH-ATM',
            data: 10000
        }, {
            value: 'WAGES-1',
            data: 10001
        }, {
            value: 'WAGES-2',
            data: 10002
        }]
    });
    $('.typeahead').on("typeahead:selected", function (obj, datum) {
        selected = datum;
    });
    $('#btn').on("click", function() {
        alert("selected: " + selected.value + " datum - " + selected.data);
    });
});