Измените то, что окно поиска ищет через выпадающий

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>

На данный момент окно поиска позволяет выполнять поиск только по электронной почте клиента.Мне было интересно, можно ли включить выпадающий список, который будет иметь два варианта, которые изменили бы то, что ищется?Я могу физически изменить поиск, изменив идентификатор входа с «CustEmail» на «OrderID».

Примечание. Я могу использовать только одно поле поиска.Можно ли вообще поменять?

Answer 1

Просто добавьте выпадающий список и дайте форме отправиться на сервлет.

<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>

В сервлете выполните поиск на основе ввода.

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 (например, для мобильных браузеров).

Answer 2

Полагаю, вы не можете самостоятельно изменить 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 3

Этого можно добиться с помощью javascript, подписавшись на событие 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);
}

Answer 4

Конечно, вы можете сделать это. Вы должны использовать только JavaScript.

Что нужно сделать:

Добавить атрибут 'onSubmit' в тег формы

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

Напишите функцию, которая сохраняет последнее предыдущее значение в переменной с глобальным scrope:

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

Напишите функцию javascript, которая считывает значение или текст опции из окна выбора и изменяет идентификатор атрибута и имя

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

 return true;
}

Надеюсь, это поможет.

PS: если вы можете использовать jquery, то код, который вам нужен, гораздо меньше и проще.