Живой поиск (автозаполнение) cdnjs jQuery


Autocomplete cdnjs.com (живой поиск) jQuery. При вводе текста в поле input (Editbox),
в специальном блоке отображаются подсказки для выбора "региона", с выделенными буквами, который ввёл пользователь в поле input.
Демо-пример автозаполнения от cdnjs на jQuery
Введите в input (Editbox) минимум одну букву.
В исходнике страницы между тегами <head> </head> прописать:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css"/>
В исходнике страницы между тегами <head> </head> вставьте скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    var $_searchQuery = $('#
region');
    var data = [

"Алтайский край",
"Амурская область",
"Архангельская область",
"Астраханская область",
"Белгородская область",

];
    $.ui.autocomplete.prototype._renderItem = function(ul, item) {
    var re = new RegExp($.trim(this.term.toLowerCase()), "i");
    var t = item.label.replace(re, "<span style='
font-weight:600;color:#FF7361;'>" + "$&" + "</span>");
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + t + "</a>").appendTo(ul)
};
$_searchQuery.autocomplete({
        source: data
    });
</script>
Во 2-й строке скрипта: region - это id поля input (для ввода региона).
В 12-й строке скрипта: color:#FF7361 - это цвет выделения букв в подсказке.
В 12-й строке скрипта: font-weight:600 - это жирность шрифта выделенных букв.
CSS стили для блока с подсказками::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
        .ui-corner-all {
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
        }
        .ui-menu {
            border: 1px solid lightgray;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 15px;
            background-color: white;
        }
        .ui-menu .ui-menu-item a {
           
color: #4F4F4F;
            display: block;
        }

        .ui-menu .ui-menu-item a:hover {
            border: 1px solid lightgray;
           
background: #708090;
           
color: #FFFFFF;
        }
        .ui-menu .ui-menu-item:hover {
            display: block;
            text-decoration: none;
            color: #3D3D3D;
            cursor: pointer;
            background-color: lightgray;
            background-image: none;
            border:0;
        }
        .ui-widget-content .ui-state-hover, .ui-widget-content .ui-state-focus {
            border: 1px solid lightgray;
            background-image: none;
            background-color: lightgray;
            font-weight: bold;
            color: #3D3D3D;
        }
   
</style>
Во 14-й строке: color: #4F4F4F - это основной цвет шрифта текста.
В 20-й строке: background: #708090 - это фон текста при наведении курсора.
В 21-й строке: color: #FFFFFF - это цвет основного текста при наведении курсора.
Скачать исходник .wbs (версия 12.3.0)
Автозаполнение (живой поиск) на JavaScript