12.12.2014, 11:57
|
|
Новичок на форуме
|
|
Регистрация: 12.12.2014
Сообщений: 5
|
|
|
Поиск слова в массиве
Добрый день уважаемые участники форума. Нужна помощь до делать скрипт.
Суть такова скрипт ищит в массиве слово по начальным буквам. он находит и выводит в выподающий блок 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]
|
|
12.12.2014, 12:22
|
 |
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
|
Сообщение от killex
|
|
Мой уровень начальный
|
может стоит начать с разбора имеющихся плагинов? гуглить "autocomplete" |
|
12.12.2014, 12:25
|
|
Новичок на форуме
|
|
Регистрация: 12.12.2014
Сообщений: 5
|
|
|
да там все с jquery а нужно чистым javascript. вариант с php отработан (там все sql запросом решается), но вот задача стоит таким образом "сервер не беспокоить".
Последний раз редактировалось killex, 12.12.2014 в 12:29.
|
|
12.12.2014, 12:31
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
killex,
дла вставки html-кода в сообщение на форуме есть специальный bb-тег и не нужно его обрамлять другим тегом 
Если к тому же в открывающемся теге добавить run, можно этот код посмотреть живьем, не отходя от кассы.
Последний раз редактировалось BETEPAH, 12.12.2014 в 13:03.
|
|
12.12.2014, 12:37
|
|
Новичок на форуме
|
|
Регистрация: 12.12.2014
Сообщений: 5
|
|
|
Спасибо это я уже узнал. Мне бы все же по задачи идеи.
|
|
12.12.2014, 12:57
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
<!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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
 надо набрать хотябы 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>
Последний раз редактировалось рони, 14.12.2014 в 02:36.
|
|
12.12.2014, 13:01
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
|
можно еще использовать .map(), .filter() методы массива и регулярку.
|
|
12.12.2014, 13:07
|
|
Новичок на форуме
|
|
Регистрация: 12.12.2014
Сообщений: 5
|
|
|
Рони Большое спасибо за помощь. Теперь я понял где ошибся
|
|
12.12.2014, 13:10
|
|
Новичок на форуме
|
|
Регистрация: 12.12.2014
Сообщений: 5
|
|
|
ВЕТЕРАНВам также спасибо, за напутствия будет время проэксперементирую.
|
|
|
|
