Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Поиск слова в массиве (https://javascript.ru/forum/css-html/52295-poisk-slova-v-massive.html)

killex 12.12.2014 11:57
Поиск слова в массиве
 
Добрый день уважаемые участники форума. Нужна помощь до делать скрипт.
Суть такова скрипт ищит в массиве слово по начальным буквам. он находит и выводит в выподающий блок div. По факту он находит первый попавший похожий. при обновлений строки поиска упорно не хочет искать что нибуть другое.
Мой уровень начальный но страница и скрипт слеплен полностью мною. На текущий момент перепробывал много чего но что то пока без результатно. буду благодарен если что подскажете или подправите. 
[HTML]
<html>
<head>
<style>
#dropdown{
list-style: none;
position:absolute; 
background:#ffffaa; 
cursor: default; 
margin: -20px 0px 0px 229px; 
padding: 2px 0px 2px 0px;
width:155px
}
#dropdown li{
padding: 3px 3px 3px 3px;
}
#dropdown li:hover{
color:#fff;
padding: 3px 3px 3px 3px;
background:#0000FF; 
}
.block-search-result{
 border: 3px #CCCCCC solid; /* стили рамки */
 -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
 -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */
 -khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */
 border-radius: 10px; /* закругление углов для всех, кто понимает */
    font-size: 18px;
    font-family:'Times New Roman', Times, serif;
font-weight:bold;
    position: absolute;
    z-index: 9999; 
    width: 200px; 
padding-top: 5px;
padding-left: 10px;
    visibility: hidden; 
    height:   27px; 
    background-color: #ffffff;
}
</style>
<script type="text/javascript">
function down()
{
var massiv = ['Серова 1-й ','8 Марта ','Банбана ','Боровая  ','Воркутинская ',
'Савина ','Восточная ','Геологов ','Димитрова ','Дуговая ',
'Интинская ','Заводская ','Западная ','Зои Космодемьянской ','Интернациональная ',
'Карьерная ','Кирпичная ','Колхозный ','Комсомольская ','Кочпонская ',
'Красных Партизан ','Серова 2-й ','Авиационный переулок ','Береговая ','Братьев Жилиных ',

'Быковского ','Водника ','Вычегодская ','Гоголя ','Дальняя ',
'Домны Каликовой ','Емвальская ','Заводской ','Космодемьянской переулок ','Интернациональный переулок ',
'Карьерный проезд ','Кирульский переулок ','Комарова ','Красная Гора ','Крупской ',
'28 Невельской Дивизии ','Католикова ','Больничный проезд ','Бумажников ','Весенняя ',

'Водопьянова ','Гаражная ','Горького ','Депутатская ','Дорожная ',
'Загородная ','Земляная ','Ижемская ','Калинина ','Катаева ',
'Клары Цеткин ','Корткеросская ','Красноармейская ','Крутая ','Бабушкина ',
'Борисова ','Ветеранов ','Вороншорский проезд ','Гаражный проезд ','Громова ',

'Депутатский переулок ','Дружбы ','Журавского ','Заливная ','Зимняя ',
'Индустриальный переулок ','Карла Маркса ','Кирова ','Колхозная ','Коммунистическая ',
'Космонавтов ','Красноармейский ','Куратова ','Крутая ','Бабушкина ',
'Борисова ','Ветеранов ','Вороншорский проезд ','Гаражный проезд ','Громова ',


];
var znachenie = document.getElementById('proverka').value;
    var znachenie = znachenie.substr(0,1).toUpperCase();
if (znachenie == false)
{
	document.getElementById('test').innerHTML='';
	document.getElementById("test").style.visibility = "hidden";
}
else
{
var a, b, c, y, k, e;

for(var i=0; i<massiv.length; i++){
    a = massiv[i].length;
    b = znachenie.length;
    c=a-b;
    y= massiv[i].substring(0, massiv[i].length - c);
    
if (znachenie===y){
	k = massiv[i];
	document.getElementById('test').innerHTML = k;
	document.getElementById("test").style.visibility = "visible";
	break;
}
}
}
}
function copy()
{
	
	var a =  document.getElementById('proverka').value = document.getElementById('test').innerHTML ; 
	document.getElementById('test').innerHTML = '';
	document.getElementById("test").style.visibility = "hidden";
}
</script>
</head>
<body>
		<input id="proverka" type="text" size="20" maxlength="50" name ="delivery_period_time" onkeypress="down()" >
		<div id="test" onclick="copy()" class="block-search-result" ></div>
		<h3>левый текст для проверки смишения</h3>
</body>	

</html>
[/HTML]

BETEPAH 12.12.2014 12:22
Цитата:
Сообщение от killex
Мой уровень начальный
может стоит начать с разбора имеющихся плагинов? гуглить "autocomplete"

killex 12.12.2014 12:25
да там все с jquery а нужно чистым javascript. вариант с php отработан (там все sql запросом решается), но вот задача стоит таким образом "сервер не беспокоить".

BETEPAH 12.12.2014 12:31
killex,
дла вставки html-кода в сообщение на форуме есть специальный bb-тег и не нужно его обрамлять другим тегом ;)
Если к тому же в открывающемся теге добавить run, можно этот код посмотреть живьем, не отходя от кассы.

killex 12.12.2014 12:37
Спасибо это я уже узнал. Мне бы все же по задачи идеи.

BETEPAH 12.12.2014 12:57 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#dropdown{
list-style: none;
position:absolute; 
background:#ffffaa; 
cursor: default; 
margin: -20px 0px 0px 229px; 
padding: 2px 0px 2px 0px;
width:155px
}
#dropdown li{
padding: 3px 3px 3px 3px;
}
#dropdown li:hover{
color:#fff;
padding: 3px 3px 3px 3px;
background:#0000FF; 
}
.block-search-result{
 border: 3px #CCCCCC solid; /* стили рамки */
 -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */
 -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */
 -khtml-border-radius:10px; /* закругл. для браузера Konquerer системы Linux */
 border-radius: 10px; /* закругление углов для всех, кто понимает */
    font-size: 18px;
    font-family:'Times New Roman', Times, serif;
font-weight:bold;
    position: absolute;
    z-index: 9999; 
    width: 200px; 
padding-top: 5px;
padding-left: 10px;
    visibility: hidden; 
    height:   27px; 
    background-color: #ffffff;
}
</style>
<script type="text/javascript">
function down() {
	var znachenie = document.getElementById('proverka').value.toLowerCase();
	var massiv = ['Серова 1-й ','8 Марта ','Банбана ','Боровая  ','Воркутинская ',
	'Савина ','Восточная ','Геологов ','Димитрова ','Дуговая ',
	'Интинская ','Заводская ','Западная ','Зои Космодемьянской ','Интернациональная ',
	'Карьерная ','Кирпичная ','Колхозный ','Комсомольская ','Кочпонская ',
	'Красных Партизан ','Серова 2-й ','Авиационный переулок ','Береговая ','Братьев Жилиных ',
	'Быковского ','Водника ','Вычегодская ','Гоголя ','Дальняя ',
	'Домны Каликовой ','Емвальская ','Заводской ','Космодемьянской переулок ','Интернациональный переулок ',
	'Карьерный проезд ','Кирульский переулок ','Комарова ','Красная Гора ','Крупской ',
	'28 Невельской Дивизии ','Католикова ','Больничный проезд ','Бумажников ','Весенняя ',
	'Водопьянова ','Гаражная ','Горького ','Депутатская ','Дорожная ',
	'Загородная ','Земляная ','Ижемская ','Калинина ','Катаева ',
	'Клары Цеткин ','Корткеросская ','Красноармейская ','Крутая ','Бабушкина ',
	'Борисова ','Ветеранов ','Вороншорский проезд ','Гаражный проезд ','Громова ',
	'Депутатский переулок ','Дружбы ','Журавского ','Заливная ','Зимняя ',
	'Индустриальный переулок ','Карла Маркса ','Кирова ','Колхозная ','Коммунистическая ',
	'Космонавтов ','Красноармейский ','Куратова ','Крутая ','Бабушкина ',
	'Борисова ','Ветеранов ','Вороншорский проезд ','Гаражный проезд ','Громова ',
	];
	if (! znachenie) {
		document.getElementById('test').innerHTML = '';
		document.getElementById('test').style.visibility = 'hidden';
	} else {
		for (var i = 0; i < massiv.length; i++){
			if (znachenie == massiv[i].substr(0, znachenie.length).toLowerCase()) {
				document.getElementById('test').innerHTML = massiv[i];
				document.getElementById('test').style.visibility = 'visible';
				break;
			};
		}
	}
}
function copy() {
	var a =  document.getElementById('proverka').value = document.getElementById('test').innerHTML ; 
	document.getElementById('test').innerHTML = '';
	document.getElementById('test').style.visibility = 'hidden';
}
</script>
</head>
<body>
		<input id="proverka" type="text" size="20" maxlength="50" name ="delivery_period_time" oninput="down()" >
		<div id="test" onclick="copy()" class="block-search-result" ></div>
		<h3>левый текст для проверки смишения</h3>
</body>	

</html>

рони 12.12.2014 12:59
:write: надо набрать хотябы 3 первых буквы
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #dropdown {
            list-style: none;
            position: absolute;
            background: #ffffaa;
            cursor: default;
            margin: -20px 0px 0px 229px;
            padding: 2px 0px 2px 0px;
            width: 155px
        }
        #dropdown li {
            padding: 3px 3px 3px 3px;
        }
        #dropdown li:hover {
            color: #fff;
            padding: 3px 3px 3px 3px;
            background: #0000FF;
        }
        .block-search-result {
            border: 3px #CCCCCC solid;
            /* стили рамки */
            
            -moz-border-radius: 10px;
            /* закругление для старых Mozilla Firefox */
            
            -webkit-border-radius: 10px;
            /* закругление для старых Chrome и Safari */
            
            -khtml-border-radius: 10px;
            /* закругл. для браузера Konquerer системы Linux */
            
            border-radius: 10px;
            /* закругление углов для всех, кто понимает */
            
            font-size: 18px;
            font-family: 'Times New Roman', Times, serif;
            font-weight: bold;
            position: absolute;
            z-index: 9999;
            width: 200px;
            padding-top: 5px;
            padding-left: 10px;
            visibility: hidden;
            height: 27px;
            background-color: #ffffff;
        }
    </style>
    <script>
        var massiv = ['Серова 1-й ', '8 Марта ', 'Банбана ', 'Боровая  ', 'Воркутинская ',
            'Савина ', 'Восточная ', 'Геологов ', 'Димитрова ', 'Дуговая ',
            'Интинская ', 'Заводская ', 'Западная ', 'Зои Космодемьянской ', 'Интернациональная ',
            'Карьерная ', 'Кирпичная ', 'Колхозный ', 'Комсомольская ', 'Кочпонская ',
            'Красных Партизан ', 'Серова 2-й ', 'Авиационный переулок ', 'Береговая ', 'Братьев Жилиных ',

            'Быковского ', 'Водника ', 'Вычегодская ', 'Гоголя ', 'Дальняя ',
            'Домны Каликовой ', 'Емвальская ', 'Заводской ', 'Космодемьянской переулок ', 'Интернациональный переулок ',
            'Карьерный проезд ', 'Кирульский переулок ', 'Комарова ', 'Красная Гора ', 'Крупской ',
            '28 Невельской Дивизии ', 'Католикова ', 'Больничный проезд ', 'Бумажников ', 'Весенняя ',

            'Водопьянова ', 'Гаражная ', 'Горького ', 'Депутатская ', 'Дорожная ',
            'Загородная ', 'Земляная ', 'Ижемская ', 'Калинина ', 'Катаева ',
            'Клары Цеткин ', 'Корткеросская ', 'Красноармейская ', 'Крутая ', 'Бабушкина ',
            'Борисова ', 'Ветеранов ', 'Вороншорский проезд ', 'Гаражный проезд ', 'Громова ',

            'Депутатский переулок ', 'Дружбы ', 'Журавского ', 'Заливная ', 'Зимняя ',
            'Индустриальный переулок ', 'Карла Маркса ', 'Кирова ', 'Колхозная ', 'Коммунистическая ',
            'Космонавтов ', 'Красноармейский ', 'Куратова ', 'Крутая ', 'Бабушкина ',
            'Борисова ', 'Ветеранов ', 'Вороншорский проезд ', 'Гаражный проезд ', 'Громова '


        ];
        massiv.sort()

  function down(obj) {
    var reg = new RegExp('^' + obj.value, 'i'),
        t = document.getElementById('test');
    t.innerHTML = '';
    t.style.visibility = "hidden";
    if (obj.value.length > 2)
        for (var i = 0; i < massiv.length; i++) {

            if (reg.test(massiv[i])) {
                t.innerHTML = massiv[i];
                t.style.visibility = "visible";
                break;
            }
        }
}       
 function copy() {

            var a = document.getElementById('proverka').value = document.getElementById('test').innerHTML;
            document.getElementById('test').innerHTML = '';
            document.getElementById("test").style.visibility = "hidden";
        }
    </script>
</head>

<body>
    <input id="proverka" type="text" size="20" maxlength="50" name="delivery_period_time" oninput="down(this)">
    <div id="test" onclick="copy()" class="block-search-result"></div>
    <h3>левый текст для проверки смишения</h3>
</body>

</html>

BETEPAH 12.12.2014 13:01
можно еще использовать .map(), .filter() методы массива и регулярку.

killex 12.12.2014 13:07
Рони Большое спасибо за помощь. Теперь я понял где ошибся

killex 12.12.2014 13:10
ВЕТЕРАНВам также спасибо, за напутствия будет время проэксперементирую.


Часовой пояс GMT +3, время: 13:47.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице