jQueryのUIオートコンプリート - 入力テキストにラベル（ない値）項目を選択し、mantainする方法

- 私のデータソースAとして使用してjQueryのUIオートコンプリートプラグイン（click to see the demo page of JQuery UI Autocomplete plugin）jQueryのUIオートコンプリート - 入力テキストにラベル（ない値）項目を選択し、mantainする方法

- 私を使用しようと怒鳴るなどのオブジェクトのリスト：

  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>

、誰かがこれで私を助けることができるしてください？

ありがとうございます！

出典

2012-03-19 outlookrperson

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

出典

2012-03-19 19:46:22 outlookrperson

以下に、あなたのオートコンプリートの呼び出しを変更し

：オートコンプリートアイテムがクリックされたとき

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

#txtCidadeが自動的に選択されたラベルをpckup必要があります。

ここにjsFiddle exampleを参照してください。

出典

2012-03-19 15:02:51 j08691

これはうまくいきません！ – outlookrperson

それはどうですか？ – j08691

申し訳ありません@ j08691、しかし、私はあなたが正しく質問を理解していないと思います。 jsfiddlerで指定したコードを使用して、オプションを選択すると、値（ラベルではありません）がテキストボックスフィールドに表示されます。 – outlookrperson

。私は私の解決策を示すだろうと思った。 IMHO 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; 
    } 
});

出典

2012-11-21 05:25:57 snorris

それを愛する！これは完璧で簡単でした。 :) – gregthegeek

戻り値はすべての違いを作る:) – 2ni

jQueryのUIオートコンプリート - 入力テキストにラベル（ない値）項目を選択し、mantainする方法

答えて

関連する問題