JQuery UI Autocomplete - Как выбрать элемент и сохранить метку (не значение) во входном тексте - PullRequest
Новая
       31

JQuery UI Autocomplete - Как выбрать элемент и сохранить метку (не значение) во входном тексте

9 голосов
/ 19 марта 2012

Я пытаюсь использовать плагин JQuery UI Autocomplete ( нажмите, чтобы увидеть демонстрационную страницу плагина JQuery UI Autocomplete )

Я использую в качестве источника данных список объектов какниже: 

            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>

Пожалуйста, кто-нибудь может мне помочь с этим?

Спасибо!

Ответы [ 3 ]

13 голосов
/ 21 ноября 2012

Так как мне тоже пришлось это решить.Я думал, что покажу свое решение.ИМХО, он чище, поскольку вам не нужны отдельные функции OnSelect и OnFocus.(хотя это действительно то же самое, что в итоге сделал rperson) 

$('#txtCidade').autocomplete({
  source: availableTags,
  focus: function(event, ui) {
    $(this).val(ui.item.label);
    return false;
  },
  select: function(event, ui) {
    $('#hidCidade').val(ui.item.value);
    $(this).val(ui.item.label);
    return false;
  }
});​
1 голос
/ 19 марта 2012

Измените свой автозаполнение вызова на следующее: 

$("#txtCidade").autocomplete({
    source: availableTags,
    select: function(event, ui) {
         $("#hidCidade").val(ui.item.label);
    }
});​

#txtCidade автоматически загружает выбранную метку при нажатии на элемент автозаполнения.

См. jsFiddle пример здесь.

0 голосов
/ 19 марта 2012

Я решил проблему, создав обработчики для OnFocus и OnSelect и возвращая false в каждом из них. 

        function OnFocus(event, ui)
        {
            $( "#txtCidade" ).val( ui.item.label );
            return false;
        }

        function OnSelect(event, ui)
        {
            var item = ui.item;
            var itemLabel = item.label;
            var itemValue = item.value;
            var campo = $("#txtCidade");

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

            var campoValue = campo.val();
            var hidCampoValue = $("hidCidade").val();
            return false;
        }
...