-1

この種の検索ボックスを自分の Web サイトに実装したいと思います - http://www.chippmunk.com/。([貯蓄はここから開始] の下)

これは、スライドする水平入力と他の2つの入力でどのように機能しますか?そのうちの1つはドロップダウン効果がありますか? これらすべてを組み合わせて検索する方法を知りたいです。

これに関するいくつかのチュートリアルを知っていますか、それとも私が構築するのを手伝ってくれますか?

よろしくお願いします。

4

1 に答える 1

1

Vlad Preda のコメントに基づいて、コードを取得し、それを少し編集して、変数 (範囲 23 から 109 など) を与えるスライダー関数を作成しました。これは私の質問の一部に答えます。

<div>
      <input id="cost" name="cost" type="range" min=23 max=109 value=93 style="width: 40%;">
      <output for="cost">1</output>
</div>

ここで、これを別の入力 (文字列。店舗名など) とともに入力として使用する必要があります。

これら 2 つの要素を組み合わせて適切な検索結果を得るにはどうすればよいでしょうか?

JavaScript コード -

$(function() {
       var el, newPoint, newPlace, offset;
       $("input[type='range']").change(function() {
         el = $(this);
         width = el.width();
         newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
         offset = -1.3;
         if (newPoint < 0) { newPlace = 0;  }
         else if (newPoint > 1) { newPlace = width; }
         else { newPlace = width * newPoint + offset; offset -= newPoint;}
         el
           .next("output")


           .text(el.val());
       })
       .trigger('change');
     });

更新された値を取得した変数 e1.val() があると思います。これを別の入力と組み合わせて、両方のパラメーターを検索変数に渡す必要があります。

于 2013-09-05T19:39:36.777 に答える