Question

我有这个搜索代码html

<form method="" action="">
  <div class="input-group">
   <input type="text" id="search" class="form-control" placeholder="Masukan No Hp yg Akan Dicari.." >
                  <span class="input-group-btn">
                <input type="button" id="submit_form" onclick="checkInput()" value="Cari" class="btn btn-primary">
    </div>
</form>

这是我的JS代码

<script>
    function checkInput() {
        var query = document.getElementById('search').value;
        window.find(query);
        return true; 

        }
</script>

我想添加提醒通知... 如果搜索我的页面中找不到的字符串

Answer 1

请勿使用window.find。正如mdn所说：

此功能不符合标准，不符合标准。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间可能存在很大的不兼容性，并且行为可能在将来发生变化。

只需搜索文档的textContent字符串：

document.querySelector('#submit_form')
  .addEventListener('click', (e) => {
    e.preventDefault();
    const query = document.querySelector('#search').value;
    console.log('Found: ' + document.body.textContent.includes(query));
  });

<form method="" action="">
  <div class="input-group">
    <input type="text" id="search" class="form-control" placeholder="Masukan No Hp yg Akan Dicari..">
    <span class="input-group-btn"></span>
                <input type="button" id="submit_form" value="Cari" class="btn btn-primary">
    </div>
</form>
<div>text1</div>
<div>text2</div>

尝试搜索text1和text3

Answer 2

在jsfiddle中查看此代码，此代码与您的代码类似

＆＃13;

findString = function findText(text) {
  alert("String \x22" + text + "\x22 found? " + window.find(text));
}

＆＃13;

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/find -->

<p>Apples, Bananas, and Oranges.</p>
<button type="button" onClick='findString("Apples")'>Search for Apples</button>
<button type="button" onClick='findString("Banana")'>Search for Banana</button>
<button type="button" onClick='findString("Orange")'>Search for Orange</button>

＆＃13;

在页面HTML上搜索字符串后“未找到”警报通知

2 个答案: