JS плагин поиск по странице

167
20 апреля 2018, 12:15

Всем привет. Есть такой вот плагин, для подсветки слов на странице, которые пользовтатель вводит в инпут (ну поиск по странице)

https://jsfiddle.net/vpav6tL1/1345/ 
<h2><a href="https://markjs.io/" target="_blank">mark.js</a> example with jQuery</h2>
<div class="panel panel-default">
  <div class="panel-heading">Search</div>
  <div class="panel-body">
    <div class="search row">
      <div class="col-xs-6">
        <span>Type in a keyword:</span>
        <input type="text" name="keyword" class="form-control" placeholder="Lorem ipsum...">
      </div>
      <div class="col-xs-6">
        <span>Search options:</span>
        <input type="checkbox" name="opt[]" value="separateWordSearch" checked> separate word search
        <br>
        <input type="checkbox" name="opt[]" value="diacritics" checked> diacritics
        <br>
        <input type="checkbox" name="opt[]" value="debug"> debug
        <br>
        <span>There are a lot more <a target="_blank" href="https://markjs.io/configurator.html">options</a>!</span>
      </div>
    </div>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-body context">
    <p>
      Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie çonsequat, vel illum dolore
      eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit prāesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
    </p>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-body">
    <p>
      <small>Demo by <a href="https://github.com/julmot" target="_blank">Julian Motz</a></small>
    </p>
  </div>
</div>

JS

$(function() {
  var mark = function() {
    // Read the keyword
    var keyword = $("input[name='keyword']").val();
    // Determine selected options
    var options = {};
    $("input[name='opt[]']").each(function() {
      options[$(this).val()] = $(this).is(":checked");
    });
    // Remove previous marked elements and mark
    // the new keyword inside the context
    $(".context").unmark({
      done: function() {
        $(".context").mark(keyword, options);
      }
    });
  };
  $("input[name='keyword']").on("input", mark);

});

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

Answer 1

Судя по коду, подсказки делает не плагин, а ваш браузер. На input повесьте атрибут autocomplete="off".

READ ALSO
Валидация/маска для телефонного номера

Валидация/маска для телефонного номера

Делаю input для телефонаНо номера могут быть и не Российские

191
Как убрать белый фон под иконкой?

Как убрать белый фон под иконкой?

Как убрать белую строку там где иконки увеличить, уменьшить и один к одному? И почему он там появляется? Те

179
Теряются абзацы в String HTML

Теряются абзацы в String HTML

Я в строку записываю несколько значений с абзацами, а в HTML строка выводится без абзацевПодскажите пожалуйста, можно как-то исправить?

142
Разные действия для кнопок формы Spring MVC

Разные действия для кнопок формы Spring MVC

Есть две кнопки в двух формах, у каждой формы свое действиеЕсли я хочу поместить radiobutton, мне нужно это делать в двух формах что бы он применялся...

147