JQuery UI自动完成-如何选择项目并保留输入文本中的标签(而非值)

问题描述 投票:9回答:4

我正在尝试使用JQuery UI自动完成插件(click to see the demo page of JQuery UI Autocomplete plugin

我使用下面的对象列表作为数据源:

            var availableTags = [
                 {label: "Sao Paulo", value: "SP"},
                 {label: "Sorocaba", value: "SO"},
                 {label: "Paulinia", value: "PA"},
                 {label: "São Roque", value: "SR"}
            ];  

问题是,当我选择一个项目时,数据源的值设置为输入字段,而不是标签。我为选择创建了一个句柄,将项目值保存在隐藏字段中,并将标签设置为输入字段,但是插件触发此事件的时间过早,并且值重新设置为输入字段。] >

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" />    
        <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" />    
        <style>
            .ui-menu-item
            {
                font-size: 12px;
            }
        </style>
        <script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var availableTags = [
                     {label: "Sao Paulo", value: "SP"},
                     {label: "Sorocaba", value: "SO"},
                     {label: "Paulinia", value: "PA"},
                     {label: "São Roque", value: "SR"}
                ];   

                $("#txtCidade").autocomplete({ minLength: 0,
                                               source: availableTags);     
            });

            function OnSelect(event, ui)
            {
                var item = ui.item;
                var itemLabel = item.label;
                var itemValue = item.value;

                $("#hidCidade").val(itemValue);
                $("#txtCidade").val(itemLabel);
            }

        </script>
    </head>
    <body>
        <form>
            <input id="hidCidade" type="hidden" />
            <input id="txtCidade" type="input" class="ui-autocomplete-input" />
        </form>
    </body>
</html>

请,有人可以帮我吗?

谢谢!

我正在尝试使用JQuery UI Autocomplete插件(单击以查看JQuery UI Autocomplete插件的演示页面),我在下面使用对象列表作为数据源:var availableTags = ...

jquery jquery-ui jquery-ui-autocomplete
4个回答
13
投票
因为我也不得不解决这个问题。我以为我会显示我的解决方案。恕我直言,它更干净,因为您不需要单独的OnSelect和OnFocus函数。 (尽管它实际上与rperson最终所做的事情相同)]

1
投票
将您的自动完成呼叫更改为以下内容:

0
投票
我可以问一个问题吗?

-2
投票
我已经解决了为OnFocus和OnSelect创建处理程序并在每个处理程序中返回false的问题。
© www.soinside.com 2019 - 2024. All rights reserved.