[AJAX] Почему при вводе в input идет редирект на страницу с результатом?

Question

[rsoinvi]

Мой код.

$(document).ready(function(){
	$('#search_str').on('change input',function(e){
		console.log(e)
		e.preventDefault();
		var url = LANG_URL
			if($(this).val().length > 0){
				$.ajax({
				url: "/ajax/live-search/" + $(this).val() ,
				type: 'GET',
				dataType:'json',
				contentType: 'application/json; charset=utf-8',
				data:{},
				success: function(data) {
					$('.search-similar').html(' ')
					var location = $('#search_str').attr('data')
					var search_val = $('#search_str').val()
					var search_result
					if((data.text && data.text.length > 0) && (data.category && data.category.length > 0)){
						$('.search-similar').show()
						for( var i = 0; i < data.text.length; i++) {
							if(location){
								$('.search-similar').append("<li class='search-similar-item'><a class='search-similar-item-link' href='" + url + "list/q-" + data.text[i] + "/location'><span class='search-similar-item-value'>" + search_val + "</span><span class='search-similar-item-text'>" + data.text[i] + "</span></a></li>");
								search_result = data.text[i]
							} else {
								$('.search-similar').append("<li class='search-similar-item'><a class='search-similar-item-link' href='" + url + "list/q-" + data.text[i] + "'><span class='search-similar-item-value'>"+ search_val + "</span><span class='search-similar-item-text'>" + data.text[i] + "</span></a></li>");
								search_result = data.text[i]
							}
						}
						for( var i = 0; i < data.category.length; i++) {
							var category = getUrl(data.category[0])
							$('.search-similar').append(" <li class='search-similar-item'><a class='search-similar-item-link' href='" + url + category.key +"/q-" + search_val + "><span class='search-similar-item-value'>" + search_val + "</span><span class='search-similar-item-text'>" + search_result + " в рубрике" + category.index + "<span></a></li>");
						}
					} else {
						$('.search-similar').hide()
					}

					function getUrl(o){
						let index,key
							for(keys in o) {
								index = Object.keys(o[keys])
								key = Object.values(o[keys])
							}
						return {
							index,
							key
						}
					}
	        	}
			});
		} else {
			$('.search-similar').hide()
		}
	});
});

Comments

[Павел Корнилов]

Попробуй запустить скрипт в strict mode и посмотреть консоль.

Answer 1

[Алексей Лауд]

Это из-за location: var location = ...

В window уже есть location, и запись в него меняет путь в адресной строке. Вы можете поменять имя этой переменной на любое другое и все должно заработать.

Comments

[Алексей Лауд]

Если более подробно (могу ошибаться в деталях):
var location поднимается в начало кода, и переобъявляет location браузера. Тот же let уже не позволит этого сделать, потому что location уже существует. А тот код, который вы выполняете: var location = $('#search_str').attr('data') выполняется как location = $('#search_str').attr('data'), что аналогично window.location = $('#search_str').attr('data')

[Павел Корнилов]

Не думаю. Тут var location инкапсуллирован внешней функцией, что прибивает его к локальному скопу и до глобального он не дотянется.

[Алексей Лауд]

KorniloFF, хм, да, ошибся.