自定义的搜索框接受2个或更多输入的滑动功能 [英] Customized search box accepting 2 or more inputs on of them having a sliding feature

问题描述

我想在自己的网站上实现这种搜索框 - http://www.chippmunk.com/ 。
（在Savings Start Here下）

I would like implement on my own website this kind of search box - http://www.chippmunk.com/. (under Savings Start Here)

这是如何与水平滑动输入& 2个其他输入，其中一个具有下拉效应？我想知道所有这些东西是如何结合起来搜索的。

How this works with a sliding horizontal input & 2 other inputs, one of which having a dropdown effect? i would like to know how all these things are combined to search.

你知道一些教程吗？或者你能帮我建立吗？

Do you know some tutorials for this or could you help me to build?

提前感谢您。

推荐答案

基于Vlad Preda的评论，我得到了代码并稍微编辑它以创建一个滑块函数，它给我一个变量（比如范围23到109），它回答了我的部分问题。

Based on Vlad Preda's comment, I got a code and edited it slightly to create a slider function which gives me a variable ( say range 23 to 109), which answers part of my question.

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

现在我需要将其用作输入，以及另一个输入（字符串。例如a商店名称）

Now I would require to use this as an input, along with another input (an string. e.g. a store name)

我如何设法将这两个元素组合起来给我一个合适的搜索结果？

How would I manage to combine these two elements to give me a proper search results?

JavaScript代码 -

JavaScript code -

$(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（）已经获得更新的值，我需要将其与另一个输入结合并将两个参数传递给搜索变量。

I guess there is a variable e1.val() which has got the updated value, I would need to combine this with another input and pass both parameters to the search variable.

这篇关于自定义的搜索框接受2个或更多输入的滑动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！