Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 27.12.2017, 19:06   #1
Artjoms
Новичок
Джуниор
 
Регистрация: 27.12.2017
Сообщений: 2
По умолчанию Нужна помощь с массивами в jquery

Всем привет! Помогите, пожалуйста, разобраться как в этом примере вместо переменных добавить массив. Например:

Код:
var states = [
		{
			region: "Alabama",
			day: 7,
			night: 8
		},
               {
			region: "Alaska",
			day: 7,
			night: 8
		}....
Когда я добавляю $('.dialog').append('<div>' + states[i].region+ '</div>');
то в списке появляются штаты, но автозаполнить импут не получается.
Спасибо!

Код HTML:
<!DOCTYPE html>
<html>
	<title>changetime</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	$(function() {
    var alreadyFilled = false;
    var states = ['Alabama','Alaska','American Samoa','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','District of Columbia','Federated States of Micronesia','Florida','Georgia','Guam','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Marshall Islands','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Northern Mariana Islands','Ohio','Oklahoma','Oregon','Palau','Pennsylvania','Puerto Rico','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virgin Island','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];

    function initDialog() {
        clearDialog();
        for (var i = 0; i < states.length; i++) {
            $('.dialog').append('<div>' + states[i] + '</div>');
        }
    }
    function clearDialog() {
        $('.dialog').empty();
    }
    $('.autocomplete input').click(function() {
        if (!alreadyFilled) {
            $('.dialog').addClass('open');
        }

    });
    $('body').on('click', '.dialog > div', function() {
        $('.autocomplete input').val($(this).text()).focus();
        $('.autocomplete .close').addClass('visible');
        alreadyFilled = true;
    });
    $('.autocomplete .close').click(function() {
        alreadyFilled = false;
        $('.dialog').addClass('open');
        $('.autocomplete input').val('').focus();
        $(this).removeClass('visible');
    });

    function match(str) {
        str = str.toLowerCase();
        clearDialog();
        for (var i = 0; i < states.length; i++) {
            if (states[i].toLowerCase().startsWith(str)) {
                $('.dialog').append('<div>' + states[i] + '</div>');
            }
        }
    }
    $('.autocomplete input').on('input', function() {
        $('.dialog').addClass('open');
        alreadyFilled = false;
        match($(this).val());
    });
    $('body').click(function(e) {
        if (!$(e.target).is("input, .close")) {
            $('.dialog').removeClass('open');
        }
    });
    initDialog();
});
	</script>
<style>
	body {
		background:#f5f5f5;
	}
	* {
		font-family: 'helvetica neue';
		box-sizing: border-box;
	}
	.autocomplete {
		background:#fff;
		position:relative;
		width:400px;
		box-shadow:0 0 2px rgba (0,0,0,0.12), 0 2px 2px rgba (0,0,0,0.24);
	}
	.autocomplete .close {
		position:absolute;
		font-size:13px;
		z-index:10;
		top:10px;
		left:calc(100% - 50px);
		color:#aaa;
		cursor:pointer;
		display:none;
	}
	.autocomplete .close.visible {
		display:block;
	}
	input {
		padding:10px 10px;
		font-weight:300;
		width:100%;
		border:none;
		outline:none;
		font-size:14px;
		color:#666;
	}
	.dialog {
		width:100%;
		display:none;
		min-height:40px;
		max-height:330px;
		overflow:scroll;
		border-top:1px solid #f4f4f4;
	}
	.dialog.open {
		display:block;
	}
	.dialog div {
		padding:20px 10px;
		font-size:13px;
		cursor:pointer;
		transition:all 0.2s;
	}
	.dialog div:hover {
		background: #f2f2f2;
	}
</style>
<body>
	<div class="autocomplete">
		<input type="text" placeholder="What is your favorite US state?">
		<span class="close">Cancel</span>
		<div class="dialog"></div>
	</div>
</body>
</html>
_____
Код программы нужно выделять (форматировать) тегами [CODE] (читать FAQ)
Модератор

Последний раз редактировалось Serge_Bliznykov; 28.12.2017 в 10:02.
Artjoms вне форума Ответить с цитированием
Старый 28.12.2017, 15:27   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

ну так надо поменять в двух процедурах:
в function initDialog
и в function match(str)

Код:
var states = [
		{
			region: "Alabama",
			day: 7,
			night: 8
		},
               {
			region: "Alaska",
			day: 7,
			night: 8
		},
               {
			region: "American Samoa",
			day: 5,
			night: 7
		}]

...
    function initDialog() {
        clearDialog();
        for (var i = 0; i < states.length; i++) {
            $('.dialog').append('<div>' + states[i].region + '</div>');
        }
    }
....
    function match(str) {
        str = str.toLowerCase();
        clearDialog();
        for (var i = 0; i < states.length; i++) {
            if (states[i].region.toLowerCase().startsWith(str)) {
                $('.dialog').append('<div>' + states[i].region + '</div>');
            }
        }
    }

кстати, есть баг в вашем autocomplete - если задать фильтр, выбрать элемент, то потом, после нажатия на Cancel фильтр не сбрасывается.
p.s. я бы полечил этот баг так:
Код:
    $('.autocomplete .close').click(function() {
        alreadyFilled = false;
        initDialog();
        $('.dialog').addClass('open');
        $('.autocomplete input').val('').focus();
        $(this).removeClass('visible');
    });

Последний раз редактировалось Serge_Bliznykov; 28.12.2017 в 15:36.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 28.12.2017, 16:10   #3
Artjoms
Новичок
Джуниор
 
Регистрация: 27.12.2017
Сообщений: 2
По умолчанию

Цитата:
Сообщение от Serge_Bliznykov Посмотреть сообщение
ну так надо поменять в двух процедурах:
в function initDialog
и в function match(str)
Большое спасибо! Теперь все работает, это то, что мне как раз и надо. А баг я даже не заметил. Получил даже два ответа
С наступающим Новым Годом!

С уважением, Артем
Artjoms вне форума Ответить с цитированием
Старый 28.12.2017, 16:20   #4
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Артём, всегда пожалуйста!

Спасибо.
с Наступающим НГ!
Serge_Bliznykov вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь с массивами в C# Komi Помощь студентам 3 24.11.2016 21:28
Нужна помощь с одним скриптом на JQuery... artiom4356 JavaScript, Ajax 3 25.03.2015 23:39
Нужна помощь с массивами!! с++ jinos Помощь студентам 4 12.11.2014 19:09
Нужна помощь по jQuery VIP2020 JavaScript, Ajax 4 15.04.2014 15:58
Нужна помощь по jQuery VIP2020 JavaScript, Ajax 1 31.03.2014 23:51