我如何根据URL中的参数填充我的搜索字段 [英] how i can populate my search fields based on the parameters inside the URL
本文介绍了我如何根据URL中的参数填充我的搜索字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究一个asp.net web应用程序，并且我有以下代码来构建一个搜索字段部分，它根据用户的输入构建URL参数： - $ /
< script type =text / javascript>
$ b $（文档）.ready（函数（）{
$（'＃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 $ input $ value = $（＃dropdown2）。 = s +FilterField+ count += Journal& FilterValue+ count +=+ inputvalue +&;
count ++;
}
if（inputvalue2！= null&&
count ++;
{
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>
期刊< input type =textid =journal>
关键字< input type =textid =keywords>
< 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>测试文档< / option>
< option value =t> t< / option>
< / select>
localcurrency
< select id =localcurrency>
< option value =>< / option>
< option value =USD> USD< / option>
< / select>
地点
< select id =locations>
< option value =>< / option>
< option value =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 =buttonid =button>搜寻< / button>
当用户点击搜索按钮时，用户将被重定向到 /teamsites/Bib%20Test/Forms/search.aspx 页面，其中包含url内的过滤器参数，它将根据传递的参数显示相关记录。
现在过滤运行良好..但我面临的问题是，我将用户重定向到此页 / 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'//输出：{a ：'b'，b：'c'，e：'f'}函数buildParameterMap（queryString）{//忽略？在开始时将查询字符串拆分为//由& var pairs = queryString.replace（/ ^ \？/，''）.split（'&'）; var map = {}; pairs.forEach（function（pair）{// //将每个片段进一步分割到= //左侧和右侧//忽略空对象，如果（pair）{var sides = pair.split（'='）; map [ sides [0]] = decodeURIComponent（sides [1]）;}}）;返回地图;} //输入：{FilterField0：'Name'，FilterValue0：'Fred'，// FilterField1：'age'，FilterValue1：'30'} //输出：{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;}函数populateSearchFields（queryString）{//根据URL查询字符串参数构建映射 - > value var parameterMap = buildParameterMap（queryString）; //根据搜索字段名称构建地图 - > value var filterFieldMap = buildFilterFieldMap（parameterMap）; Object.keys（filterFieldMap）.forEach（function（field）{$（'＃'+ field）.val（filterFieldMap [field]）;}）;} populateSearchFields（'FilterField0 = locations& FilterValue0 = US& FilterField1 = dropdown1& amp ; FilterValue1 = b'）;
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js\"></script>Journal< input type =textid =journal>关键字< input type =textid =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 id =title> < option value =>< / option> < option value =TestDoc>测试文档< / option> < option value =t> t< / option> < /选择>本地货币< select id =localcurrency> < option value =>< / option> < option value =USD> USD< / option> < /选择>位置< select id =locations> < option value =>< / option> < option value =US> US< / option> < option value =UK> UK< / option> < /选择> dropdown1< select id =dropdown1> < option value =>< / option> < option value =a> a< / option> < option value =b> b< / option> < /选择> 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 =buttonid =button>搜索< / button>
I am working on an asp.net web application and i have the following code to build a search fields section, which build the URL parameters based on the users' input:-
<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>
Where when the user clicks on the search button, the user will be redirected to the /teamsites/Bib%20Test/Forms/search.aspxpage with the filter parameters inside the url, which will show the related records according to the parameters being passed.
now the filtering is working well.. but the problem i am facing is that after i redirect the user to this page /teamsites/Bib%20Test/Forms/search.aspx the filter fields values (such as the local currency, locations, title, etc..) will cleared out.
so can i using JavaScript to assign the filer fields their original values ? i mean can i extract the fields' values from the URL and assign it to them ? so after the user is being redirected to the /teamsites/Bib%20Test/Forms/search.aspx they can still see the filtering fields populated with the filtering values they have entered?
解决方案
You can accomplish this by doing the following:
- Parse the current page's query string to separate out its query parameters
- Process those to match up filter field names with their values
- Use
$('#' + fieldName).val(value)to set the field values in the page
Below, as a demonstration, I'm passing in a hardcoded query string '?FilterField0=locations&FilterValue0=US&FilterField1=dropdown1&FilterValue1=b' into the populateSearchFields() function. In practice, you would use the three functions here, unmodified, but instead of that hardcoded value, pass in 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>
这篇关于我如何根据URL中的参数填充我的搜索字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
