Question

我正在创建一个图片搜索功能，该功能将在网站的主页上使用，链接到网站摄影库。

我创建了一个包含所有图像库相册的选择菜单（这些是显示子图像列表的页面）作为选项，并具有文本输入和搜索按钮。

<select name="photographySearch" id="photographySearch">
    <option value="">Select category</option>
    <option value="football.aspx">Football</option>
    <option value="basketball.aspx">Basketball</option>
    <option value="hockey.aspx">Hockey</option>
</select>

<input type="text" id="photographySearchKeyword"
  onfocus="if(this.value==this.defaultValue) this.value='';"
  onblur="if(this.value=='') this.value='Enter keyword';"
  value="Enter keyword" />

<input type="button" 
  id="photographySearchButton" 
  name="searchbutton" 
  value="Search" />

我需要一个可以执行以下操作的脚本：

如果用户单击搜索按钮而未从选择中选择任何选项菜单或输入任何关键字到文本输入，位置将更改为“/photography-search.aspx”页面（默认显示摄影库中的所有图像），不显示默认的“输入关键字”作为搜索结果
如果用户单击搜索按钮而未从选择中选择任何选项菜单并在文本输入中输入关键字，该位置将更改为“/photography-search.aspx?search=”+ $（'＃photographySearchKeyword'）。attr（'value'）;“包括输入到文本输入中的值
如果用户单击搜索按钮而未从选择菜单中选择任何选项或在文本输入中输入任何关键字，则该位置将更改为“/photography-search.aspx”页面（默认显示该页面）摄影库中的所有图像）
如果用户单击搜索按钮并从选择中选择任何选项菜单并没有在文本输入中输入任何关键字，位置会更改为所选选项的值，例如“/football.aspx”页面并且不显示默认的“输入关键字”作为搜索结果
如果用户单击搜索按钮并从选择中选择任何选项菜单并在文本输入中输入任意关键字，该位置将更改为所选选项的值，例如“/football.aspx?search='+ $（'＃photographySearchKeyword'）。attr（'value'）;”包括输入文本输入页面的值

到目前为止，我只设法创建选项2：

$('#photographySearchButton').click(function() {
    location.href = '/photography-search.aspx?search=' +
                    $('#photographySearchKeyword').attr('value');
});

http://jsfiddle.net/zjs8n/

非常感谢任何帮助。

Answer 1

测试示例here

$(document).ready(function() {
  $('#photographySearchButton').click(function() {
    var category = $('#photographySearch :selected').val();
    var keyword = $('#photographySearchKeyword').val();

    var page = '/photography-search.aspx';
    var query = '';

    if (category.length > 0)
      page = category;
    if (keyword.length > 0 && keyword != 'Enter keyword')
      query = '?search=' + keyword;

    alert(page+query);
  });
});

jQuery选择菜单和文本输入搜索

1 个答案: