0

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

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

<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" />​

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

  1. 如果用户在没有从选择菜单中选择任何选项或在文本输入中输入任何关键字的情况下单击搜索按钮，则位置将更改为“/photography-search.aspx”页面（默认显示摄影中的所有图像）库）并且不显示默认的“输入关键字”作为搜索结果

  2. 如果用户在没有从选择菜单中选择任何选项的情况下单击搜索按钮并在文本输入中输入关键字，则位置将更改为“/photography-search.aspx?search=' + $('#photographySearchKeyword' ).attr('值');" 包括输入到文本输入中的值

  3. 如果用户在没有从选择菜单中选择任何选项或在文本输入中输入任何关键字的情况下单击搜索按钮，则位置将更改为“/photography-search.aspx”页面（默认显示摄影中的所有图像）图书馆）

  4. 如果用户单击搜索按钮并从选择菜单中选择了任何选项，并且没有在文本输入中输入任何关键字，则位置将更改为所选选项的值，例如“/football.aspx”页面并且不显示默认“输入关键字”作为搜索结果

  5. 如果用户单击搜索按钮并从选择菜单中选择任何选项并在文本输入中输入任何关键字，则位置将更改为所选选项的值，例如“/football.aspx?search=' + $( '#photographySearchKeyword').attr('value');" 包括在文本输入页面中输入的值

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

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

http://jsfiddle.net/zjs8n/

任何帮助将不胜感激。

4

1 回答 1

2

在此处测试示例

$(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);
  });
});
于 2013-01-04T03:45:53.947 回答