自定义搜索框,接受其中具有滑动特征的2个或多个输入


Customized search box accepting 2 or more inputs on of them having a sliding feature

我想在自己的网站上实现这种搜索框-http://www.chippmunk.com/.(从这里开始节省)

这是如何与滑动水平输入&2个其他输入,其中一个具有下拉效果?我想知道所有这些东西是如何组合在一起进行搜索的。

你知道这方面的一些教程吗?或者你能帮我构建吗?

事先非常感谢。

根据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>

现在我需要将此作为输入,以及另一个输入(字符串,例如商店名称)

我该如何将这两个元素结合起来才能得到合适的搜索结果?

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()得到了更新的值,我需要将其与另一个输入组合起来,并将这两个参数传递给搜索变量。