Question

我正在使用jQuery自动完成功能，而且我遇到了一些问题。这就是我现在所拥有的：

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>

<script type="text/javascript" language="javascript">

    $(document).ready(function () {

        var agencyData = [];
        agencyData.push({value: '1', label: 'Agency1'});  
        agencyData.push({value: '2', label: 'Agency2'});
        agencyData.push({value: '3', label: 'Agency3'});

        $(".agenciesTextbox").autocomplete({
            source: agencyData,
            minChars: 1,
            delay: 0
        });

    });

</script>

我有两个问题：

当我在自动填充列表中选择一个项目时，它会使用值而不是标签填充文本框（即我选择了Agency2和填充了2的文本框）。如何使用文本框填充标签文本？
我想将所选值存储在隐藏值中 - 如何在选择项目时捕获所选值？

Answer 1

  $(".agenciesTextbox").autocomplete({
        source: agencyData,
        select: function (event, ui) {
           alert(ui.item.value)
        }
    });

Answer 2

jsFiddle

$(document).ready(function () {
    var agencyData = [];
    agencyData.push({
        value: '1',
        label: 'Agency1'
    });
    agencyData.push({
        value: '2',
        label: 'Agency2'
    });
    agencyData.push({
        value: '3',
        label: 'Agency3'
    });

    $(".agenciesTextbox").autocomplete({

        source: agencyData,
        minChars: 1,
        delay: 0,
        focus: function (a, b) {
            $(".agenciesTextbox").val(b.item.label);
            return false;
        },
        select: function (a, b) {
            console.log(b.item.value);
            return false;
        }
    });
});

Answer 3

这应该做的伎俩，看看小提琴，非常直截了当。从val输入中删除隐藏的标记，您会注意到它填充了值。

JsFiddle

<input class="agenciesTextbox">
<input type="hidden" class="agenciesTextbox-val">

   $(document).ready(function () {

        var agencyData = [];
        agencyData.push({value: '1', label: 'Agency1'});  
        agencyData.push({value: '2', label: 'Agency2'});
        agencyData.push({value: '3', label: 'Agency3'});

        $(".agenciesTextbox").autocomplete({
            source: agencyData,
            minChars: 1,
            delay: 0,
            select: function( event, ui ) {                 
                $(".agenciesTextbox").val( ui.item.label );                 
                $(".agenciesTextbox-val").val( ui.item.value );                 
                return false;             
            }   
        });

    });

从jQuery自动完成中获取选定的结果

3 个答案: