На jQuery по клику удалить часть строки <li>

113
30 декабря 2020, 21:50

Есть выпадающий список 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="#">&nbsp;&nbsp;&nbsp;' + 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);

Answer 1

Если у Вас во время выполнения кода/добавления обработчика события 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>

Answer 2

Подойдет обычный 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>

READ ALSO
Имитация ввода текста

Имитация ввода текста

В данном коде текст вставляется в форму сразу весьКак сделать что-то на подобии animate(), чтобы пользователь видел как в форме печатается автоматически...

129
Не отображается код клавиш PageDown, PageUp

Не отображается код клавиш PageDown, PageUp

Собственно не отображется код клавиш PageUp, PageDown и 4 стрелки, которые находятся внизу

110
как сделать цикл из классов

как сделать цикл из классов

Как правильно написать цикл для увеличения цифр (обоих, которые идут и после а и после _) с шагом 1 до 33(включительно)Чтоб получалось

116
Высота родительского блока?

Высота родительского блока?

Добрый есть простая разметка родительский блок в котором вложена картинка (лишнее убрал):

131