Подключаем js:
|
1 |
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> |
Подключаем css (опционально):
|
1 |
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> |
Инициализация:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$( function() { var availableTags = [ "Доставка по России", "Доставка по Москве", "Доставка по Санкт-петербургу", "Доставка по Оренбургу" ]; $( "[name=faq-input]" ).autocomplete({ source: availableTags, minLength: 2, open: function() { $('#ui-id-1').offset(function(i,val){ return {top:val.top + 10, left:val.left}; }); } }); } ); jQuery.ui.autocomplete.prototype._resizeMenu = function () { var ul = this.menu.element; ul.outerWidth(this.element.outerWidth()); } |
Изменить стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover color: $link #ui-id-1 width: 100% background: #fff padding: 30px box-shadow: 0px 7px 21px rgba(0, 0, 0, 0.12) border-radius: 12px transform: translateY(300px) .ui-menu-item padding: 8px 0 .ui-menu-item-wrapper font-family: "MullerRegular", "sans-serif" line-height: 1.4 cursor: pointer |
Изменить html
|
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 40 41 |
$(function () { var projects = [{ value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" }]; $("#project").autocomplete({ minLength: 0, source: projects, focus: function (event, ui) { $("#project").val(ui.item.label); return false; }, select: function (event, ui) { $("#project").val(ui.item.label); $("#project-id").val(ui.item.value); $("#project-description").html(ui.item.desc); $("#project-icon").attr("src", "images/" + ui.item.icon); return false; } }) .data("autocomplete")._renderItem = function (ul, item) { return $("<li>") .data("item.autocomplete", item) .append("<a>" + item.label + "<br>" + item.desc + "</a>") .appendTo(ul); }; }); |
