Главная страница>Связанные с программированием>Другой исходный код
Скачать

Быстрый и удобный поиск внутри страницы.

Холмс фильтрует список элементов на основе input значения всего за ~2 КБ.

Установка

Вы можете установить Holmes с помощью npm или bower под именем пакета holmes.js . Для npm это выглядит так: 

$ yarn add holmes.js # or via npm

После этого вы можете добавить его на свою страницу, например, с помощью веб-пакета, объединения, браузера или загрузки модуля в другой тег скрипта.

Вы должны убедиться, что у вас есть правило css для класса .hidden , которое скрывает элементы так, как вы хотите. Один из вариантов — это: 

. hidden {
  display : none;
}

но это может быть любой css который вы захотите.

Использование

демо

Когда мне следует его использовать?

Вам следует использовать Холмса, когда

  • у вас ограниченное количество предметов
  • вам не нужна допуск к опечаткам
  • вы хотите добавить только очень маленькую библиотеку
  • все элементы уже видны на странице

В тех случаях, когда у вас более сложные ожидания, я бы предложил использовать такой сервис, как Algolia.

Честное раскрытие: сейчас я работаю в Algolia, кажется ли вам это интересным? Присоединяйтесь к нам!

Простой пример 

 holmes ( {
  input : '.search input' , // default: input[type=search]
  find : '.results div' // querySelectorAll that matches each of the results individually
} )

Параметры

полная документация

input

по умолчанию : input[type=search]

querySelector для ввода

примеры : input , .search input

find необходимый

querySelectorAll для элементов для поиска

примеры : blockquote p , .result , .results div

class

class.hidden

по умолчанию : hidden

Класс, который нужно добавить, если файл .find не содержит поисковый запрос.

примеры : hidden , dn , none

class.visible

по умолчанию : false

Класс, который нужно добавить к видимым элементам, если они содержат поисковый запрос.

примеры : visible , vis , nohidden

placeholder

по умолчанию : false

html, чтобы показать, когда нет результатов.

примеры : <p> No results </p> , Didn't find anything.

dynamic

по умолчанию : false

Включите эту опцию, если вы хотите, чтобы Холмс запрашивал значение .find при каждом вводе.

примеры : true , false

instant ️ УСТАРЕЛО

по умолчанию : false

Эта опция устарела. Чтобы использовать Holmes в асинхронной среде, инициализируйте его с помощью: 

 holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ;

Таким образом, он начнется немедленно, как это было раньше с instant: true . Приносим извинения за неудобства.

По умолчанию Холмс будет ждать события DOMContentLoaded , чтобы начать поиск. Например, если вы загружаете элементы с помощью AJAX , это событие происходит слишком рано. В этом случае вы можете включить instant и запустить Holmes, когда ваш контент будет готов.

примеры : true , false

minCharacters

по умолчанию : 0

Прежде чем Холмс начнет фильтрацию, необходимо ввести минимальное количество символов.

примеры : 2 , 5

mark

по умолчанию : false

Чтобы начать показывать результат в теге <mark> внутри .find , вам следует включить эту опцию. Чтобы изменить цвет, в котором отображается это match , вам следует стилизовать mark background-color.

❗ это нарушит работу прослушивателей событий на вложенном контенте

❗ это не сработает, если символ после совпадения является литералом > .

Если вам действительно необходимо использовать этот символ, вы можете заменить все вхождения > на &gt;

примеры : true , false

hiddenAttr

по умолчанию : true

Добавляет hidden="true" к скрытым элементам. Интересная ссылка, объясняющая его использование.

shouldShow

Решение о совпадении по умолчанию — это частичное совпадение входного значения. 

 function ( htmlText , search ) {
  return htmlText . indexOf ( search ) !== - 1 ;
}

Пользовательская функция сопоставления, вызываемая с первым аргументом — текстом элемента, а вторым — с текущим входным текстом. Это должно возвращать true, если вы хотите, чтобы элемент отображался, и false, если его нужно скрыть. 

 var customMatching = function ( htmlText , search ) {
  return search . split ( / s+ / ) . every ( function ( v , i ) {
    if ( htmlText . indexOf ( v ) === - 1 ) {
      return false ;
    }
    return true ;
  } ) ;
}
holmes ( {
  shouldShow : customMatching
} )

onHidden

Обратный вызов, когда элемент скрыт. 

 function ( el ) {
  console . log ( 'hide' , el ) ;
}

onVisible

Обратный вызов, когда элемент снова станет видимым. 

 function ( el ) {
  console . log ( 'show' , el ) ;
}

onEmpty

Обратный вызов, когда элементы не найдены. 

 function ( placeholder ) {
  console . log ( 'nothing found' , placeholder ) ;
}

onFound

Обратный вызов, когда элементы найдены после того, как они пусты. 

 function ( placeholder ) {
  console . log ( 'something found' , placeholder ) ;
}

onInput

Обратный вызов для каждого ввода. 

 function ( input ) {
  console . log ( 'current input' , input ) ;
}

Методы и члены

Для всех методов вам следует инициализировать новый экземпляр Holmes следующим образом: 

 var h = new holmes ( options ) ;

Тогда вы можете использовать следующие методы:

.clear()

Вы можете очистить ввод Холмса программно, используя: 

 h . clear ( ) ;

.count()

Вы можете в любой момент получить информацию о том, какие элементы видимы, скрыты и вообще: 

 h . count ( ) ; // {all: 41, hidden: 34, visible: 7}

.start()

Запустите четный прослушиватель для указанных параметров. Холмс всегда запускает .start() при инициализации. 

 h . start ( ) ;

.stop()

Останавливает текущий прослушиватель событий. Разрешает обещание, когда оно выполнено. 

 h . stop ( ) ;
h . start ( ) ; // could accidentally start too soon

h . stop ( ) . then ( h . start ) ; // might take a small time

.hidden

Также есть член .hidden , который выдает счетчик без вызова функции: 

 console . log ( h . hidden ) ; // 34

.elements

NodeList всех элементов, которые рассматривает Холмс. Также есть .elementsLength для количества элементов и .elementsArray с массивом элементов.

.input

Ввод, который просматривает Холмс. Также есть последняя строка поиска в виде .searchString

.placeholder

Текущий заполнитель (узел DOM).

.running

Независимо от того, запущен ли этот экземпляр.

.options

Показывает выбранные варианты для данного экземпляра Холмса. Вы также можете установить подобные параметры после инициализации. 

 console . log ( h . options ) ; // specified options

примечание: для настройки параметров после запуска может потребоваться h.stop().then(h.start)

Витрина

Что ВОЗ изображение
Bullg.it @haroenv
семья.scss @lukyvj
wikeo.be @bistory
обед-брейкapp.be @AndreasBackx

Мне бы очень хотелось узнать, как люди используют мой проект, дайте мне знать, если хотите, чтобы о вас рассказали!

Вопросы?

Совместимость до IE11. Для поддержки старых браузеров вам потребуется заполнить classList , addEventListener и событие input , например, remy/polyfills. Я еще не пробовал это сам, поэтому дайте мне знать, что вы использовали, если поддерживаете старые браузеры!

Для IE11 вам необходимо заполнить Object.assign и String.includes , вы можете сделать это, как описано в #90.

Дайте мне знать в твиттере: @haroenv или в выпуске.

Содействие

Вклады всегда приветствуются! Вот несколько общих рекомендаций:

  • использовать feature branches
  • не делай это медленнее
  • объясните, почему вам нужна эта функция
  • npm run doc чтобы воссоздать документацию

Сборка в UMD выполняется посредством накопительного пакета ( npm run build ).

Но я не кусаюсь, если у вас есть вопросы или неуверенность, напишите мне, например, на гиттере.

Лицензия

Апач 2.0

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все