使用输入字段作为 jquery 选择器

Question

我正在智能手机应用程序中创建搜索页面，搜索应该在应用程序中搜索匹配项。当我对搜索词进行硬编码时，jquery 选择器工作正常，当我用变量替换硬编码选择器时，它 returns "undefined"。我一定是遗漏了一些非常明显的东西，但几个小时后我还是没有看到它。

下面是带有输入框的搜索页面

<input name="searchTxt" type="text" maxlength="32" id="searchTxt" class="searchField"/>
<button onclick="searchApp()"> Search </button>
<p id="searchResultsP">Search results go here</p>

这是应该搜索应用程序并用搜索结果覆盖上面的 "searchResultsP" 段落的 js。我添加了一些警报来尝试找出失败的地方，并在下面添加了评论以显示结果。

function searchApp() {
    var $searchTerm = "";
$searchTerm =  document.getElementById("searchTxt").value;
alert ("$searchTerm is " + $searchTerm); // this works correctly
alert("search 1 results " + $( ".english:contains($searchTerm)" ).html());// returns undefined
alert("search 2 results hard coded " + $( ".english:contains('arrest')" ).html()); // this works correctly
var $searchResultsAlert = $( ".english:contains('arrest')" ).html();
alert ("search 3 results hard coded are " + $searchResultsAlert);// this works correctly

// Now overwrite the searchresultsP
    document.getElementById("searchResultsP").innerHTML = $( ".english:contains('arrest')" ).value; // this returns undefined

Answer 1

表达式

 alert("search 1 results " + $( ".english:contains($searchTerm)" ).html());

按字面意思搜索“$searchTerm”，但不搜索变量值 $searchTerm。

改为

 alert("search 1 results " + $( ".english:contains(" + $searchTerm + ")" ).html());

Answer 2

没关系，我想通了。不完全确定为什么，但声明：

document.getElementById("searchResultsP").innerHTML = $( ".english:contains(" + $searchTerm + ")" ).html();

在段落中插入了一堆js代码。解决方案是分两步进行，首先将搜索结果放在一个变量中，然后将变量插入段落中，如下所示

var $searchResultsAlert = $( ".english:contains(" + $searchTerm + ")" ).html();
document.getElementById("searchResultsP").innerHTML = $searchResultsAlert

再次感谢您的宝贵时间。

使用输入字段作为 jquery 选择器

Using an input field as a jquery selector

variables

jquery