Живой поиск на Битрикс. Пример реализации.

49a91a4ebb

Основные задачи:

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

Окей, поехали!

Примерная вёрстка самого блока с поисковой строкой и div-ником, куда будем добавлять результаты поиска:

<form action="/search/index.php">
            <input type="search" maxlength="50" size="15" value="" name="q" id="q" autocomplete="off">
    &nbsp;
    <button class="reset" id="reset_live_search" value="reset" type="reset"></button>
    <div id="search_result">
        <div class="live-search">
        </div>    
    </div>
</form>
Читать далее

JS плагин для сохранения данных на локальный диск.

Нашел отличный JS плагин для сохранения данных на жесткий диск.

К сожалению, document.execCommand(‘SaveAs’) уже не спасает, посему встречайте:

https://github.com/eligrey/FileSaver.js

пример использования:

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

Демка здесь.

Селекторы JQuery

Небольшой справочник по селекторам JQuery.

Список селекторов

Базовые
«*» — все элементы
«.className» — элементы с классом className
«#idName» — элемент (один!) с идентификатором idName
«tagName» — элементы с заданным именем тега

Комбинированные селекторы
Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах CSS
«first, second, …» — элементы удовлетворяющие любому из селекторов first, second, …
«outer inner» — элементы из inner, которые являются потомками (т.е. лежат внутри) элементов из outer
«parent > child» — элементы из child, которые являются прямыми потомками элементов из parent
«prev + next» — элементы из next, которые следуют непосредственно за элементами из prev
«prev ~ next» — элементы из next, которые следуют за элементами из prev

Читать далее