динамическое window.find не работает с jQuery

Question

динамическое window.find не работает с jQuery

0

Я не могу для жизни понять, почему это не работает.

Я хочу найти текущую страницу для текста, используя окно поиска. Я googled и нашел это: http://www.javascripter.net/faq/searchin.htm. Я внедрил код на свой сайт, но он не работает. функция (findString()) работает, но только когда я жестко findString() строку (так как в я не могу использовать javascript или jquery для получения значения ввода текста). Я сделал эту скрипку: http://jsfiddle.net/alyda/CPJrh/4/, чтобы проиллюстрировать проблему.

Вы можете раскомментировать разные строки, чтобы увидеть, что я тестировал.

alyda 22 сен. 2013, в 10:06

Источник

Теги:

javascript

jquery

dom

4 ответа

Ещё вопросы

Sergio · Answer 1 · 2013-09-22T05-48-00.000Z

У jQuery есть метод : contains(), который упростит то, что вы ищете.

Взгляните сюда: скрипка

$("button[type='submit']").click(function () {
    var string = $('#search').val();
    var matched = $('li:contains(' + string + ')');
    matched.css('color','red');
    console.log(matched);
    return false;
});

Мое намерение состоит в том, чтобы использовать только функцию поиска браузера, а не пользовательскую подсветку текста. Глупый я, я как-то думал, что так будет легче ...

Alireza Dastyar · Answer 2 · 2018-03-11T06-54-00.000Z

У меня была такая же проблема в приложении angularjs, и я исправил ее, изменив структуру DOM.
мой код HTML был примерно таким:

<body>
       <div class="content" >
            <input class="searchInput" />
            <p>
                content ....
            </p>
       </div>
</body>

и я изменил его на что-то вроде этого:

<body>
       <div class="search">
            <input class="searchInput" />
       </div>

       <div class="content">
            <p>
                content ....
            </p>
       </div>
</body>

Примечание. Я знаю, что эта тема устарела.

alyda · Answer 3 · 2013-09-23T03-13-00.000Z

Я нашел исправление (вроде). Похоже, что вход должен быть размещен хорошо ПОСЛЕ содержимого, которое нужно искать в DOM. Это означает, что я сделал следующее:

<section class="content">
  <h2>Fire</h2>
  <h3>Fire Extinguishers</h3>
  <ul>
    <li>Model 240</li>
    <li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
  </ul>
  ...
  <div id="navbar">
    <ul>
      ...
    </ul>
    <input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
    <button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
  </div>

как вы можете видеть, я переместил вход (который находится в div на панели навигации) НИЖЕ всего текста, который я хочу найти, и использовал CSS для программного размещения навигационной панели в верхней части страницы. Мне не особенно нравится эта настройка (так как это противоречит потоку контента), но поскольку я искал самую быструю и простую реализацию одностраничного поиска, это должно будет сделать.

Я все равно хотел бы знать, почему это происходит, когда javascript находится в конце DOM, где он принадлежит...

просто, как объясняется в моем ответе. Нативная находка ищет сверху (последняя известная позиция) снизу. Ваше решение состоит в том, чтобы попасть в поле ввода в конце поиска (внизу), а не сразу в начале (вверху).

GitaarLAB · Answer 4 · 2013-09-22T06-04-00.000Z

В firefox я заметил, что скрипка (v4), заданная в вопросе, работала, но не так, как ожидал ее ожидающий.

Что происходит в firefox, так это то, что функция действительно находит значение..: вы только что ввели его в поле ввода. Тогда метод find в браузере, кажется, зависает в "контексте" входного "управления" и не выходит из него. Поскольку браузер продолжит поиск из последней активной позиции, если вы выберете что-либо после поля ввода, функция будет работать так, как ожидалось. Таким образом, трюк заключается не в том, чтобы "попасть в ловушку" во входном поле в начале вашего поиска.

Основной (грязный) пример того, как вырваться из него (не обязательно правильное решение или чистый jquery, но может вдохновить на полезную процедуру, так как теперь вы знаете корень проблемы в FF):

$( "button[type='submit']" ).click(function(){

    var tst=$('#search').val(); //close over value
    $('#search').val('');       //clear input
    if(tst){                    //sanity check
      this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
      findString( tst );  //find first value
    } else { alert('please enter something to search for'); }
    return false;
});

Пример скрипки проверен (работает) в FF.

PS: учитывая ваш конкретный пример, используя <li>, я чувствую, что ответ Серхио будет более подходящим решением, тем более, что это никогда не будет запускать строку: alert ("Opera browsers not supported, sorry..."), но правильный ответ на ваш вопрос window.find все еще интересный!

PS2: если вы, по сути, используете (или реплицируете) функцию поиска в браузере, почему бы не обучить пользователя и не дать им нажать Ctrl + F?

Надеюсь это поможет!

Я знаю, что функция поиска в браузере также будет соответствовать вводу, я не слишком беспокоюсь об этом. Но если вы посмотрите на код, он продолжит находить дополнительные совпадения (если вы продолжаете нажимать кнопку отправки, что не очень удобно для пользователя, но я пытался избежать пользовательского выделения текста).
RE: PS2, я подумал, что, возможно, я буду обучать пользователя, если они заметят, что окно поиска открывается, когда они нажимают кнопку отправки (или что их взаимодействие с поиском на этой странице соответствовало взаимодействию, если они просто нажимали CTRL + F). Боюсь, что типичный пользователь этого сайта может быть не склонен к изучению такой простой, но полезной команды, либо он уже понял это сам, либо ему просто все равно.
добавлена проверка пустого подтверждения и добавлена оставшаяся часть объяснения, которое я дал в (теперь удаленном) комментарии к вашему вопросу (но забыл скопировать в этот ответ).