web-dev-qa-db-ja.com

JQuery UIオートコンプリート-アイテムを選択し、入力テキストのラベル（値ではない）を維持する方法

JQuery UIオートコンプリートプラグインを使用しようとしています（ クリックしてJQuery UIオートコンプリートプラグインのデモページを表示 ）

以下のように、オブジェクトのリストをデータソースとして使用しています。

            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>

誰かがこれを手伝ってくれませんか？

ありがとう！

jqueryjquery-uijquery-ui-autocomplete
9
outlookrperson

私もこれを解決しなければならなかったので。私は自分の解決策を示すと思いました。個別の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;
  }
});​
13
snorris

オートコンプリート呼び出しを次のように変更します。

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

#txtCidadeは、オートコンプリートアイテムがクリックされたときに、選択したラベルを自動的に取得する必要があります。

ここでjsFiddleの例を参照してください。

1
j08691