Поиск по странице
Всем доброго дня, взял готовую поисковую систему написанную на jQuery ( линк: http://jsfiddle.net/6c3ph7uj/2/ ), проблема в том, что она ищет по тексту совпадение.
У меня имеется несколько input'ов в каждой из них хранится определенный текст, хотел реализовать чтобы поиск не по тексту искал, а среди всех инпатов на странице. Вывод инпатов на странице <table class="table company"> <tr> <td><center><input type="submit" class="btn btn-info" value="V" ng-show="compForm.$dirty"/></center></td> <td><input type="text" ng-model="company.Name"/></td> <td><input type="text" ng-model="company.Object"/></td> <td><input type="text" ng-model="company.Amount"/></td> <td><input type="text" ng-model="company.Price"/></td> <td><center><input type="button" class="btn btn-danger" value="X" ng-click="delete(company);"/></center></td> </tr> </form> </table> Скрипт поиска: var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке var scrollspeed = 200; // время прокрутки var keyint = 1000; // интервал между нажатиями клавиш var term = ''; var n = 0; var time_keyup = 0; var time_search = 0; jQuery('body').delegate('#spgo', 'click', function(){ jQuery('body,html').animate({scrollTop: jQuery('span.highlight:first').offset().top-paddingtop}, scrollspeed); // переход к первому фрагменту }); function dosearch() { term = jQuery('#spterm').val(); jQuery('span.highlight').each(function(){ //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); }); var t = ''; //jQuery('div#news_sub').each(function(){ // в селекторе задаем область поиска jQuery('input').each(function(){ // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '<span class="highlight">$&</span>')); // выделяем найденные фрагменты n = jQuery('span.highlight').length; // количество найденных фрагментов console.log('n = '+n); if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n+'. <span class="splink" id="spgo">Перейти</span>'); if (n>1) // если больше одного фрагмента, то добавляем переход между ними { var i = 0; jQuery('span.highlight').each(function(i){ jQuery(this).attr('n', i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел }); jQuery('span.highlight').not(':last').attr({title: 'Нажмите, чтобы перейти к следующему фрагменту'}).click(function(){ // всем фрагментам, кроме последнего, добавляем подсказку jQuery('body,html').animate({scrollTop: jQuery('span.highlight:gt('+jQuery(this).attr('n')+'):first').offset().top-paddingtop}, scrollspeed); // переход к следующему фрагменту }); jQuery('span.highlight:last').attr({title: 'Нажмите, чтобы вернуться к форме поиска'}).click(function(){ jQuery('body,html').animate({scrollTop: jQuery('#spterm').offset().top-paddingtop}, scrollspeed); // переход к форме поиска }); } }); } jQuery('#spterm').keyup(function(){ var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка if (jQuery('#spterm').val().length>=minlen) { // проверяем длину строки setTimeout(function(){ // ждем следующего нажатия var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями dosearch(); // если все в порядке, приступаем к поиску }, keyint); } else jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом }); if (window.location.hash!="") // бонус { var t = window.location.hash.substr(1, 50); // вырезаем текст jQuery('#spterm').val(t).keyup(); // вставляем его в форму поиска jQuery('#spgo').click(); // переходим к первому фрагменту } Будьте добры, помочь или подсказать в какой степи искать, в пытался подменить div#content на input :lol: Надеялся, что сработает. Заранее благодарю |
как планируете выделять часть текста в инпутах?
х.з. может кто сталкивался и подскажет, но лично я не знаю. как альтернатива информацию из инпутов в блоки, а по ним искать. <html> <head> <meta charset="utf-8"> </head> <body> <input type="text" id="id"> <div id="block"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $('#id').keyup(function(){ $("#block").html(this.value); }); </script> </body> </html> |
Да мне хотя бы чтобы текст в input'ах выделял, а не сам инпат)
|
Может есть у кого нибудь какие нибудь варианты? или получше идея)
|
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 18:42. |