0

Есть выпадающий список 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);

2
  • 1
    вот пример верстки с различными вариантами и приведите.
    – teran
    20 мая 2019 в 13:13
  • Уточните, что Вы имеете ввиду под "Между наименованием и ценой может быть любой разделитель"? По идее разделитель должен быть такой, какой не встречается в имени товара...
    – XelaNimed
    20 мая 2019 в 13:58

2 ответа 2

0

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

7
  • Не работает, не понимаю почему, может быть из-за того, что ul li не существует до клика по инпуту? 20 мая 2019 в 13:52
  • @Андрей а при чём клик по инпуту? Вы же в вопросе указали что клик на li? Если у Вас элемент ul не существует в момент выполнения приведённого кода, то нужно использовать другой подход.
    – XelaNimed
    20 мая 2019 в 14:01
  • Это я от незнания. ul li появляется в момент клика по полю инпута. 20 мая 2019 в 14:04
  • @Андрей поправил ответ.
    – XelaNimed
    20 мая 2019 в 18:27
  • идеально, я бы Вас расцеловал)) Спасибо большое. 20 мая 2019 в 19:42
0

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

4
  • Если название товара будет содержать дефис, то код отработает некорректно обрезав часть названия. Скорее всего нужно заранее определять разделитель...
    – XelaNimed
    20 мая 2019 в 13:57
  • так точно, однако Автор это не указал 20 мая 2019 в 13:58
  • Я запутанно выразился, разделитель будет такой, какой проще фильтровать, например "|". Его в товарах точно не будет. 20 мая 2019 в 14:02
  • @Андрей тогда и без регулярок 20 мая 2019 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.