Есть выпадающий список ul li, который появляется при клике по полю инпута. До клика ul li не существует на странице. Как с помощью jQuery при клике на элемент из списка сделать добавление в инпут только части строки? Суть: в выпадающем списке товар+цена, цена для удобства, но она в инпут попадать не должна. Между наименованием и ценой разделитель "|".
<div class="form-group">
<label class="control-label" for="input-name">Наименование:</label>
<input type="text" name="filter_name" value="" id="input-name" class="form-control">
<ul class="dropdown-menu">
<li data-value="4296"><a href="#"> Батарейка | Цена 0.1200</a></li>
<li data-value="4245"><a href="#"> Батарейка2 | Цена 0.7000</a></li>
</ul>
</div>
Прошу прощения у людей, что дали ответ ранее, от незнания основ не учел момент с появлением списка ul li только при клике в поле инпут.
Нашел, где сидит автодополнение, интуитивно пониманию, что нужно вставить код в конец, где $dropdown.on('click', '> li > a', $.proxy(this.click, this)); но не могу понять как это сделать правильно.
// Autocomplete */
(function($) {
$.fn.autocomplete = function(option) {
return this.each(function() {
var $this = $(this);
var $dropdown = $('<ul class="dropdown-menu" />');
this.timer = null;
this.items = [];
$.extend(this, option);
$this.attr('autocomplete', 'off');
// Focus
$this.on('focus', function() {
this.request();
});
// Blur
$this.on('blur', function() {
setTimeout(function(object) {
object.hide();
}, 200, this);
});
// Keydown
$this.on('keydown', function(event) {
switch(event.keyCode) {
case 27: // escape
this.hide();
break;
default:
this.request();
break;
}
});
// Click
this.click = function(event) {
event.preventDefault();
var value = $(event.target).parent().attr('data-value');
if (value && this.items[value]) {
this.select(this.items[value]);
}
}
// Show
this.show = function() {
var pos = $this.position();
$dropdown.css({
top: pos.top + $this.outerHeight(),
left: pos.left
});
$dropdown.show();
}
// Hide
this.hide = function() {
$dropdown.hide();
}
// Request
this.request = function() {
clearTimeout(this.timer);
this.timer = setTimeout(function(object) {
object.source($(object).val(), $.proxy(object.response, object));
}, 200, this);
}
// Response
this.response = function(json) {
var html = '';
var category = {};
var name;
var i = 0, j = 0;
if (json.length) {
for (i = 0; i < json.length; i++) {
// update element items
this.items[json[i]['value']] = json[i];
if (!json[i]['category']) {
// ungrouped items
html += '<li data-value="' + json[i]['value'] + '"><a href="#">' + json[i]['label'] + '</a></li>';
} else {
// grouped items
name = json[i]['category'];
if (!category[name]) {
category[name] = [];
}
category[name].push(json[i]);
}
}
for (name in category) {
html += '<li class="dropdown-header">' + name + '</li>';
for (j = 0; j < category[name].length; j++) {
html += '<li data-value="' + category[name][j]['value'] + '"><a href="#"> ' + category[name][j]['label'] + '</a></li>';
}
}
}
if (html) {
this.show();
} else {
this.hide();
}
$dropdown.html(html);
}
$dropdown.on('click', '> li > a', $.proxy(this.click, this));
$this.after($dropdown);
});
}
})(window.jQuery);
Если у Вас во время выполнения кода/добавления обработчика события HTML элементы не присутствуют в документе, то можно отслеживать все события click
и отфильтровывать затем только те, которые удовлетворяют фильтру:
var sep = "|";
$(document).on("click", "a.product-label", function() {
var str = this.innerHTML;
$("#input-name").val(str.substr(0, str.indexOf(sep)).trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>
<label for="input-name">Наименование:</label>
<input type="text" id="input-name" value="" />
<ul class="dropdown-menu">
<li><a href="#" class="product-label"> Батарейка | Цена 0.1200</a></li>
<li><a href="#" class="product-label"> Батарейка2 | Цена 0.7000</a></li>
<li><a href="#" class="product-label"> Атомная батарея | Цена 999.000</a></li>
</ul>
</div>
Подойдет обычный split('|')
с последующим shift()
и trim()
:
$("ul > li a").on("click", function() {
$("#input-name").val(this.innerHTML.split('|').shift().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>
<label for="input-name">Наименование:</label>
<input type="text" id="input-name" value="" />
<ul class="dropdown-menu">
<li data-value="4296"><a href="#"> Батарейка | Цена 0.1200</a></li>
<li data-value="4245"><a href="#"> Батарейка2 | Цена 0.7000</a></li>
</ul>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
В данном коде текст вставляется в форму сразу весьКак сделать что-то на подобии animate(), чтобы пользователь видел как в форме печатается автоматически...
Собственно не отображется код клавиш PageUp, PageDown и 4 стрелки, которые находятся внизу
Как правильно написать цикл для увеличения цифр (обоих, которые идут и после а и после _) с шагом 1 до 33(включительно)Чтоб получалось
Добрый есть простая разметка родительский блок в котором вложена картинка (лишнее убрал):