我如何根据 URL 中的参数填充我的搜索字段

john Gu

我正在开发一个 asp.net web 应用程序,我有以下代码来构建一个搜索字段部分,它根据用户的输入构建 URL 参数:-

<script type="text/javascript">

$(document).ready(function(){

    $('#button').click(function(e) {  
        var count=1;
        var s="";

        var inputvalue = $("#journal").val();
        var inputvalue2 = $("#keywords").val();
        var inputvalue3 = $("#datepub").val();
        var inputvalue4 = $("#title").val();
        var inputvalue5 = $("#localcurrency").val();
        var inputvalue6 = $("#locations").val();
        var inputvalue7 = $("#dropdown1").val();
        var inputvalue8 = $("#dropdown2").val();

        if(inputvalue!=null && inputvalue!="")
        {
        s = s+ "FilterField"+count+"=Journal&FilterValue"+count+"="+inputvalue+"&";
        count++;
        }
        if(inputvalue2!=null && inputvalue2!="")
        {
        s = s+ "FilterField"+count+"=KeyWords&FilterValue"+count+"="+inputvalue2+"&";
        count++;
        }
        if(inputvalue3!=null && inputvalue3!="")
        {
        s = s+ "FilterField"+count+"=datepub&FilterValue"+count+"="+inputvalue3+"&";
        count++;
        }
        if(inputvalue4!=null && inputvalue4!="")
        {
        s = s+ "FilterField"+count+"=Title&FilterValue"+count+"="+inputvalue4+"&";
        count++;
        }
        if(inputvalue5!=null && inputvalue5!="")
        {
        s = s+ "FilterField"+count+"=localcurrency&FilterValue"+count+"="+inputvalue5+"&";
        count++;
        }
        if(inputvalue6!=null && inputvalue6!="")
        {
        s = s+ "FilterField"+count+"=locations&FilterValue"+count+"="+inputvalue6+"&";
        count++;
        }
        if(inputvalue7!=null && inputvalue7!="")
        {
        s = s+ "FilterField"+count+"=dropdown1&FilterValue"+count+"="+inputvalue7+"&";
        count++;
        }
        if(inputvalue8!=null && inputvalue8!="")
        {
        s = s+ "FilterField"+count+"=dropdown2&FilterValue"+count+"="+inputvalue8+"&";
        count++;
        }
        window.location.replace("/teamsites/Bib%20Test/Forms/search.aspx?"+s);

    });
});
</script> 

       Journal <input type="text" id="journal"> 
       keywords <input type="text" id="keywords"> 




<select id="datepub">
<option value=""></option>
  <option value="1950">1950</option>
  <option value="2010">2010</option>
  <option value="2017">2017</option>
  <option value="audi">Audi</option>
</select>

title
<select id="title">
<option value=""></option>
  <option value="TestDoc">test doc</option>
  <option value="t">t</option>

</select>

localcurrency
<select id="localcurrency">
<option value=""></option>
  <option value="USD">USD</option>

</select>

locations
<select id="locations">
<option value=""></option>
  <option value="US">US</option>
  <option value="UK">UK</option>

</select>

dropdown1
<select id="dropdown1">
<option value=""></option>
  <option value="a">a</option>
  <option value="b">b</option>

</select>

dropdown2
<select id="dropdown2">
<option value=""></option>
  <option value="aa">aa</option>
  <option value="bb">bb</option>
  <option value="cc">cc</option>
  <option value="dd">dd</option>
</select>
       <button type="button" id="button">search</button>

当用户点击搜索按钮时,用户将被重定向到/teamsites/Bib%20Test/Forms/search.aspxurl中带有过滤参数页面,该页面将根据传递的参数显示相关记录。

现在过滤运行良好.. 但我面临的问题是,在我将用户重定向到此页面后/teamsites/Bib%20Test/Forms/search.aspx,过滤字段值(例如当地货币、位置、标题等)将被清除。那么我可以使用 JavaScript 为文件管理器字段分配其原始值吗?我的意思是我可以从 URL 中提取字段的值并将其分配给它们吗?那么在用户被重定向到 之后,/teamsites/Bib%20Test/Forms/search.aspx他们仍然可以看到填充了他们输入的过滤值的过滤字段?

金利来

您可以通过执行以下操作来完成此操作:

  • 解析当前页面的查询字符串,分离出它的查询参数
  • 处理这些以将过滤器字段名称与其值匹配
  • 使用$('#' + fieldName).val(value)在页面中设置字段值

下面,作为演示,我将硬编码的查询字符串传递'?FilterField0=locations&FilterValue0=US&FilterField1=dropdown1&FilterValue1=b'populateSearchFields()函数中。在实践中,您将使用这里的三个函数,未经修改,但不是硬编码的值,而是传入window.location.search.

// input: '?a=b&b=c&e=f'
// output: { a: 'b', b: 'c', e: 'f' }
function buildParameterMap(queryString) {
  // ignore the ? at the beginning and split the query string into 
  // pieces separated by &
  var pairs = queryString.replace(/^\?/, '').split('&');
  var map = {};

  pairs.forEach(function(pair) {
    // further split each piece to the left and right of the =
    // ignore pairs that are empty strings
    if (pair) {
      var sides = pair.split('=');
      map[sides[0]] = decodeURIComponent(sides[1]);
    }
  });

  return map;
}

// input: { FilterField0: 'Name', FilterValue0: 'Fred',
//          FilterField1: 'age', FilterValue1: '30' }
// output: { name: 'Fred', age: '30' }
function buildFilterFieldMap(parameterMap) {
  var maxFieldCount = 15;

  var map = {};

  for (var i = 0; i < maxFieldCount; i += 1) {
    var filterFieldName = parameterMap['FilterField' + i];
    if (filterFieldName) {
      map[filterFieldName.toLowerCase()] = parameterMap['FilterValue' + i];
    }
  }

  return map;
}

function populateSearchFields(queryString) {
  // build a map from URL query string parameter -> value
  var parameterMap = buildParameterMap(queryString);

  // build a map from search field name -> value
  var filterFieldMap = buildFilterFieldMap(parameterMap);

  Object.keys(filterFieldMap).forEach(function(field) {
    $('#' + field).val(filterFieldMap[field]);
  });
}

populateSearchFields('?FilterField0=locations&FilterValue0=US&FilterField1=dropdown1&FilterValue1=b');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Journal <input type="text" id="journal"> keywords <input type="text" id="keywords">


<select id="datepub">
    <option value=""></option>
      <option value="1950">1950</option>
      <option value="2010">2010</option>
      <option value="2017">2017</option>
      <option value="audi">Audi</option>
    </select> title
<select id="title">
    <option value=""></option>
      <option value="TestDoc">test doc</option>
      <option value="t">t</option>
    
    </select> localcurrency
<select id="localcurrency">
    <option value=""></option>
      <option value="USD">USD</option>
    
    </select> locations
<select id="locations">
    <option value=""></option>
      <option value="US">US</option>
      <option value="UK">UK</option>
    
    </select> dropdown1
<select id="dropdown1">
    <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    
    </select> dropdown2
<select id="dropdown2">
    <option value=""></option>
      <option value="aa">aa</option>
      <option value="bb">bb</option>
      <option value="cc">cc</option>
      <option value="dd">dd</option>
    </select>
<button type="button" id="button">search</button>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我如何知道 URL 中接受的参数?

来自分类Dev

我如何根据URL将一个类添加到正文

来自分类Dev

我如何在Mailer Preview中访问url参数

来自分类Dev

我如何在emberjs组件中获取url参数

来自分类Dev

我如何从zf2中的url获取参数?

来自分类Dev

我将如何根据 excel 中的日期自动填充值

来自分类Dev

根据 PHP 中的 url 限制进入我网页的请求

来自分类Dev

我不知道如何编写包含原始url中的参数的重写规则(在我的.htaccess中)

来自分类Dev

如何根据url参数过滤数组

来自分类Dev

如何根据url参数隐藏/显示元素

来自分类Dev

如何根据url参数过滤数组

来自分类Dev

如何获取我的WSDL的URL?

来自分类Dev

我如何获取audiosrc URL?

来自分类Dev

如何获取我的WSDL的URL?

来自分类Dev

我如何根据要求检查我的令牌

来自分类Dev

htaccess | 我如何允许“。” 在API URL中?

来自分类Dev

我如何在 Nginx 中重写 URL

来自分类Dev

WooCommerce:使用 URL 中的参数预填充注册字段

来自分类Dev

为什么AngularJS从搜索栏中删除我的部分URL

来自分类Dev

我可以在搜索前使Chrome多功能框自动填充URL的优先级吗?

来自分类Dev

在APIGatewayProxyEvent中,哪个字段会给我URL?

来自分类Dev

我可以根据纯 CSS 的 URL 的获取参数来设置链接样式吗?

来自分类Dev

如何获取我的控制器的url参数?

来自分类Dev

当我想在我的 URL 中传递参数时读取了错误的 URL

来自分类Dev

如何使用URL地址中的参数#重定向,我使用laravel 5.8

来自分类Dev

如何在 TypeScript 中向我的 url 添加查询参数?

来自分类Dev

为什么我的参数值在生成的URL中丢失?

来自分类Dev

我们可以在url参数中传递null吗?

来自分类Dev

为什么在我的URL中显示form_tag参数?

Related 相关文章

  1. 1

    我如何知道 URL 中接受的参数?

  2. 2

    我如何根据URL将一个类添加到正文

  3. 3

    我如何在Mailer Preview中访问url参数

  4. 4

    我如何在emberjs组件中获取url参数

  5. 5

    我如何从zf2中的url获取参数?

  6. 6

    我将如何根据 excel 中的日期自动填充值

  7. 7

    根据 PHP 中的 url 限制进入我网页的请求

  8. 8

    我不知道如何编写包含原始url中的参数的重写规则(在我的.htaccess中)

  9. 9

    如何根据url参数过滤数组

  10. 10

    如何根据url参数隐藏/显示元素

  11. 11

    如何根据url参数过滤数组

  12. 12

    如何获取我的WSDL的URL?

  13. 13

    我如何获取audiosrc URL?

  14. 14

    如何获取我的WSDL的URL?

  15. 15

    我如何根据要求检查我的令牌

  16. 16

    htaccess | 我如何允许“。” 在API URL中?

  17. 17

    我如何在 Nginx 中重写 URL

  18. 18

    WooCommerce:使用 URL 中的参数预填充注册字段

  19. 19

    为什么AngularJS从搜索栏中删除我的部分URL

  20. 20

    我可以在搜索前使Chrome多功能框自动填充URL的优先级吗?

  21. 21

    在APIGatewayProxyEvent中,哪个字段会给我URL?

  22. 22

    我可以根据纯 CSS 的 URL 的获取参数来设置链接样式吗?

  23. 23

    如何获取我的控制器的url参数?

  24. 24

    当我想在我的 URL 中传递参数时读取了错误的 URL

  25. 25

    如何使用URL地址中的参数#重定向,我使用laravel 5.8

  26. 26

    如何在 TypeScript 中向我的 url 添加查询参数?

  27. 27

    为什么我的参数值在生成的URL中丢失?

  28. 28

    我们可以在url参数中传递null吗?

  29. 29

    为什么在我的URL中显示form_tag参数?

热门标签

归档