Question

我目前在我们的管理导航中有一个提交到searchOrdersAction.jsp页面的“搜索框”。

<tr align="left" valign="top">
            <td>&nbsp;</td>
            <form action="searchOrdersAction.jsp" name="form" method="get" ><td><input name="CustEmail" type="text" class="DataEntry" id="CustEmail"></td><td><input name="Submit" type="submit" class="SOBut" value="Go"></td></form>
         </tr>

截至目前，搜索框仅允许搜索客户电子邮件。我想知道是否可以包含一个下拉列表，它有两个选项，可以改变搜索的内容？我可以通过将输入的ID从“CustEmail”更改为“OrderID”来实际更改搜索。

注意：我只能使用一个搜索框。甚至可以改变吗？

Answer 1

我假设您不能自己更改搜索jsp，并且只能更改管理界面。在这种情况下，这应该工作：

<tr align="left" valign="top">
  <td>&nbsp;</td>
  <form action="searchOrdersAction.jsp" name="form" method="get">
    <td><input name="CustEmail" type="text" class="DataEntry" id="frm_input"></td>
    <td><select onchange="document.getElementById('frm_input').name=this.value">
          <option selected value="CustEmail">Customer Email</option>
          <option value="OrderID">Order ID</option>
        </select>
    </td>
    <td><input name="Submit" type="submit" class="SOBut" value="Go"></td>
  </form>
</tr>

未经测试，但非常简单。

Answer 2

只需添加一个下拉列表，然后将表单提交给servlet。

<form action="search">
    <input type="text" name="query" />
    <select name="type">
        <option value="order">Order ID</option>
        <option value="email">Customer email</option>
    </select>
    <input type="submit" />
</form>

在servlet中，根据输入执行搜索作业。

String type = request.getParameter("type");
String query = request.getParameter("query");
List<Result> results = null;

if ("order".equals(type)) {
    results = orderService.find(query);
} else if ("email".equals(type)) {
    results = emailService.find(query);
}

request.setAttribute("results", results);
request.getRequestDispatcher("/WEB-INF/search.jsp").forward(request, response);

在/WEB-INF/search.jsp中，您可以通常的方式显示结果。

如果用户禁用了JS（例如移动浏览器），则无需使用无法运行的JavaScript。

Answer 3

你可以做到。你必须只使用javascript。

你需要做什么：

将属性“onSubmit”添加到表单标记

<form action="searchOrdersAction.jsp" {...} onSubmit="return changeMe()">

编写一个函数，将最后一个值存储到具有全局scrope的变量中：

lastValue = "";
function lastValue()
{
  document.getElementByID("theSelectBox").value;
}

编写一个javascript函数，从selectbox中读取值或选项文本，并更改属性ID和Name

function changeMe()
{
 var selectValue = document.getElementByID("theSelectBox").value; 
 var myInputField = document.getElementByID(selectValue);

 return true;
}

希望它会有所帮助。

PS：如果你可以使用jquery，那么你需要的代码就会变得更小更容易。

Answer 4

您可以通过订阅选择框的onchange事件使用javascript来实现此目的。

添加下拉列表以在搜索类型之间切换

<select id='search_field_selector'>
    <option value='CustEmail'>Email</option>
    <option value='OrderID'>Order ID</option>
</select>

使用javascript根据选择框的值

设置搜索类型

//bind the on change event to the select box
document.getElementById('search_field_selector').addEventListener('change',
    switchSearchType,false);

//Switch the ID of the input when the select box changes
function switchSearchType(e){
    var target = document.getElementById('CustEmail');
    if(!target){
        target = document.getElementById('OrderID');
    }
    target.setAttribute('id',this.value);
}

通过下拉菜单更改搜索框正在搜索的内容

4 个答案: