选择js将搜索词附加到下拉值

时间:2014-03-02 03:18:12

标签: javascript jquery jquery-chosen

我是javascript和html5的新手。我正在努力实现以下目标:

我有一个下拉值,其中包含以下值:

Everything:
From:
To:

用户将有一个文本框输入搜索词。当用户输入像“blah”这样的文本并在下拉列表中选择“From:”并点击回车时,文本框中的文字应该说 “From:blah”并搜索Blah的所有消息。

这是我试图实现的Outlook中的一项功能。我试图使用选择的js,但无法进行太多。任何人都可以提供任何指示吗?

1 个答案:

答案 0 :(得分:0)

假设这是你的html:

<select id="cmbClause">
  <option value="1">Everything:</option>
  <option value="2">From:</option>
  <option value="3">To:</option>
</select>
<input type="text" id="txtSearch" />
<input type="text" id="txtResult" />

然后尝试下面的jQuery脚本:

$(function(){
  $('#txtSearch').keypress(function(e) {
    // if user press "Enter" on txtSearch and txtSearch not empty
    if(e.keyCode==13 && $('#txtSearch').val().trim()!="") {
      $('#txtResult').val(setClause($('#cmbClause').val()) + $('#txtSearch').val());
    }
  });

  function setClause(val) {// Get select (dropdown) value and return string
    var clause;
    switch(val) {
      case '1': clause = "Everything "; break;
      case '2': clause = "From "; break;
      case '3': clause = "To "; break;
    }
    return clause;
  }
});