Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   поиск текста в диве и фокусировка на нем (https://javascript.ru/forum/jquery/13332-poisk-teksta-v-dive-i-fokusirovka-na-nem.html)

Suharik 26.11.2010 15:38

поиск текста в диве и фокусировка на нем
 
Всем привет. див, в нем еще один див, в первом диве есть инпут.
<div id='idname'>
 Введите слово  <input type="text" name="input_name">
       <div id="idname2">
        текст1
        супертекст
        новыйтекст
        классный текст
        неповторимый текст
        любой текст
        прикольный текст
       </div>
</div>

итак: див с id= idname2 имеет фиксированную высоту со скролом

задача при вводе слова (точнее беквы) скрипт должен искать во втором диве слова которые начинаются на такие же сиволы как мы вводим в ипут, и при этом фокус должен ложится на найденное слово(или селект,я хз).

допустим я кейапом поймаю нажатие клавиши, и узнаю какая буква ввелась. Каким образом мне поискать во всем диве слова который начинаются на букву которую я ввел, если я ввел вторую букву, например "ПР" то должен зафокусироватся "прикольный текст" и тд.

Есть какие-то функции которые так могут, мне кажется тут еще без регулярки не обойтись. Помогите плиз.
ЗЫ. findText не катит

ksa 26.11.2010 22:04

Цитата:

Сообщение от Suharik
Есть какие-то функции которые так могут

Есть такие функции!
http://javascript.ru/String/indexOf

Suharik 01.12.2010 13:06

indexOf не катит. Напишу что я сделал, и что осталось
<div id='idname'>
    Введите слово  <input type="text" name="input_name">
        <div id='searchBlock' style="height:15px;overflow:auto">
               <div id=a1> Первое слово </div>
                <div id=a2> Второе слово </div>
               <div id=a3> Третье слово </div>
               <div id=a4> Четвертое слово </div>
               <div id=a5> Пятое слово </div>
               <div id=a6> Шестое слово </div>
               <div id=a7> Седьмое слово </div>
               <div id=a8> Восьмое слово </div>
            </div>
     <div>


var backvar="";
 $('#idname :text').keyup(function (){
  $("#searchBlock div :contains( '"+backvar+"' )").css( {color:"black"} ); 
 var vvod = $('#idname  :text').val();
 var slovo = $("#searchBlock div :contains ('"+vvod+"')").css({ color:"red" }); 
 backvar =  vvod;
 });

Див с id='searchBlock' имеет фикс. высоту, и оверфлов авто. тоесть сразу показывается скролл.
Вот когда я в инпут ввожу букву, он находит и закрашивает, но скрол естественно не показывает нам строку которая закрасилась (если она вне блока за скролом). Как сделать так:
Если мы ввели "Восьмое слово" чтобы скрол прокручивался в низ и показывал нам эту строку "Восьмое слово".
2) Как избавится от чуствительность к регистру для этого параметра ":contains"

ksa 01.12.2010 13:22

Цитата:

Сообщение от Suharik
indexOf не катит

Чем же он у тебя провинился? :blink:

ksa 01.12.2010 13:24

Цитата:

Сообщение от Suharik
id=1

ИД должно начинаться хотябы с одной буквы... ;)

Suharik 01.12.2010 13:27

честно говоря, я не знаю как реализовать это с indexOf как я понимаю для этого нужно собрать весь текст в одну переменную str и потом только искать в нем через indexOf. Допустим я там смогу найти, но как потом это все найти в тексте всех дивов?. Это как то неправильно.

Suharik 01.12.2010 13:28

Цитата:

Сообщение от ksa (Сообщение 81722)
ИД должно начинаться хотябы с одной буквы... ;)

ух, точно)

ksa 01.12.2010 14:10

Цитата:

Сообщение от Suharik
но как потом это все найти в тексте всех дивов?

А как сейчас ты ищешь во всех ДИВах сразу? :) Просто берёшь все потроха дива с ИД='searchBlock' и ищешь...

Регулярные выражения такэе применяются к строке. Т.ч. ничего другого в поиске ты и не сделаешь... Все будет сводиться к анализу некой строки. ;)

monolithed 01.12.2010 14:16

Цитата:

Сообщение от ksa
http://javascript.ru/String/indexOf

Ну зачем? еще не кроссбраузерный метод....

Все элементарно:
<script type="text/javascript">
window.onload = function(){
    document.getElementsByName('input')[0].onkeyup = function(){
    var div = document.getElementsByTagName('div'), i = div.length;
        while(i--){
             if(this.value.charAt(0) == div[i].innerHTML.charAt(0)){
                 div[i].style.cssText = 'color: red; text-decoration: line-through';
             }
        }
    };
};
</script>

<input type="text" name="input" />
<div>раз</div>
<div>два</div>
<div>три</div>

Suharik 01.12.2010 14:48

Поиск текста я сделал на JQ.
monolithed,
Если в Вашем примере сделатьдополнительный див, в который помстить остальныйе дивы с текстом, задать ему фикс высоту и сделать скролинг этого дива., то при поиске слова, оно будет выделятся красным и зачеркиватся, но скрол не будет прокручиватся. Эта самая главная проблема что у меня не получается.


Часовой пояс GMT +3, время: 12:22.