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

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>

我有两个问题：

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

Answer 1

这应该可以解决问题，看看小提琴，非常直截了当。从 val 输入中删除隐藏标签，您会注意到它填充了该值。

提琴手

<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;             
            }   
        });

    });

Answer 2

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

Answer 3

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;
        }
    });
});