更改搜索框正在通過下拉菜單搜索

我目前在提交到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」，我可以在物理上改變搜索。

注意：我只能使用一個搜索框。它甚至有可能改變嗎？

來源

2011-06-27 Louis Stephens

你應該簡單地讓用戶指定兩個字段作爲搜索條件。如果兩個字段都被指定，則它將是「AND」搜索。否則它是一個「OR」搜索。 – happymeal

我假設你不能自己改變搜索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>

未經測試，但它非常簡單。

來源

2011-06-27 15:02:02

感謝Daniel Martin，我真的很感謝你的幫助。是否可以更改「Id」，而不是「名稱」。我確實嘗試將.name = this.value更改爲.id = this.value（但這似乎不起作用）。 –

你真的不想改變id值。之前，當你說「我可以通過將輸入的ID從」CustEmail「更改爲」OrderID「來改變搜索結果。」......我相信你錯了。關鍵的變化不是'id'，而是'name'。搜索表單不知道你使用了什麼'id'，但是確實知道你使用了什麼'name'。 –

你可以做到這一點。你必須使用JavaScript。

你要做的：

添加屬性「的onsubmit」的表單標籤

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

寫存儲前面的最後一個值與全球斯克羅普變量的函數：

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

編寫一個javascript函數，它從選擇框讀取值或選項文本並更改屬性ID和名稱

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

return true; 
}

希望它會有所幫助。 PS：如果你可以使用jquery，你需要的代碼更安靜，更簡單。

來源

2011-06-27 15:05:31 reporter

，因爲我在這裏發佈了一個答案，最後兩條缺失的行很麻煩：myInputField.setAttribute（「name」，selectValue）; myInputField.setAttribute（「id」，selectValue）; – reporter

您可以通過訂閱選擇框的onchange事件來實現這一點。

添加下拉到搜索類型

<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); 
}

來源

2011-06-27 15:05:46

只需添加一個下拉菜單，讓形式之間切換提交給一個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可以顯示結果通常的方式。

不需要JavaScript，如果用戶禁用了JS（例如移動瀏覽器），則無法使用JavaScript。

來源

2011-06-27 15:27:13 BalusC

更改搜索框正在通過下拉菜單搜索

回答

相關問題