0

Ruby on Rails 3.2.2 とjquery-rails 2.1.3 (jQuery UI を含む) を使用しています。Autocomplete jQuery UI ウィジェットを使用して都市データを検索、選択、および送信するために、HTML フォームを実装しようとしています。

現時点では、次の「オートコンプリート可能な」フィールドを使用してフォームを実装しています。

<div class="ui-widget">
  <label for="cities">City: </label>
  <input id="cities" />
</div>

<script>
  $jQ(function() {
    var cache = {};
    $jQ( "#cities" ).autocomplete({
      autoFocus: true,
      minLength: 3,
      source:    function( request, response ) {
        $jQ.ajax({
            url:      '<SEARCH_PATH>',
            data:     { search: request.term },
            dataType: 'json',
            success:  function(data) {
              var cities = new Array();

              $jQ.each(data, function(arrayID, city) {
                cities.push({ label: city.name, value: city.id })
              });

              response( cities ); 
            },
            error:    function () {
              response([]);
            }
        });
      }
    });
  });
</script>

上記のコードは、JSON データを取得し、取得した都市のリストを表示するために期待どおりに機能します。ご覧のとおり、市のデータの「有用な部分」は市の です。これは、送信されたデータを内部で処理するために値をid使用しているためです。idただし、都市の「選択可能な」リストが表示されている場合、キーボードの上矢印と下矢印を使用してそれらの都市の1つを選択すると、入力フィールドに都市が入力されますid(都市ではありませんname)。

私はしたいと思います：

  • 都市を選択すると、入力フィールドに のname代わりに都市が表示されます。id
  • id都市ではなく都市を送信する方法を見つけてnameください(たとえnameフロント エンド コンテンツに表示されるのが都市だけであっても)。

それを適切に達成するにはどうすればよいですか？

4

1 に答える 1

2

select イベントを使用して非表示フィールドに入力し、代わりに非表示フィールドを送信します。

<div class="ui-widget">
  <label for="cities">City: </label>
  <input id="cities" />
  <input name="cities" type="hidden" id="cities-hidden" />
</div>

js

$jQ(function() {
  var cache = {};
  $jQ( "#cities" ).autocomplete({
    autoFocus: true,
    ...
    select: function(e, ui) {
      $("#cities-hidden").val(ui.item.value); // populate hidden input
      $("#cities").val(ui.item.label); // populate autocomplete input
      return false; // prevent default action of populating autocomplete input with value
    }
  });
});

デモ: http://jsfiddle.net/f8yPX/3/

于 2012-11-05T16:00:12.563 に答える