ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JQuery autocomplete c подсветкой
3 сообщений из 3, страница 1 из 1
JQuery autocomplete c подсветкой
    #38384072
Фотография vip-y
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vip-y
Участник
вот код
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
      var wordlist = [
          'January', 'February', 'March', 'April', 'May', 'June',
          'July', 'August', 'September', 'October', 'November',
          'December', 'Yammer', 'Yaw', 'Yawn', 'Auspiscious'];


      wordlist.sort();


      function monkeyPatchAutocomplete() {

          // Don't really need to save the old fn, 
          // but I could chain if I wanted to
          var oldFn = $.ui.autocomplete.prototype._renderItem;

          $.ui.autocomplete.prototype._renderItem = function( ul, item) {
              var re = new RegExp("^" + this.term, "i") ;
              var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + this.term + "</span>");
              return $( "<li></li>" )
                  .data( "item.autocomplete", item )
                  .append( "<a>" + t + "</a>" )
                  .appendTo( ul );
          };
      }


      $(document).ready(function() {

          monkeyPatchAutocomplete();

          $("#input1").autocomplete({
              // The source option can be an array of terms.  In this case, if
              // the typed characters appear in any position in a term, then the
              // term is included in the autocomplete list.
              // The source option can also be a function that performs the search,
              // and calls a response function with the matched entries.
              source: function(req, responseFn) {
                  addMessage("search on: '" + req.term + "'<br/>");
                  var re = $.ui.autocomplete.escapeRegex(req.term);
                  var matcher = new RegExp( "^" + re, "i" );
                  var a = $.grep( wordlist, function(item,index){
                      //addMessage("&nbsp;&nbsp;sniffing: '" + item + "'<br/>");
                      return matcher.test(item);
                  });
                  addMessage("Result: " + a.length + " items<br/>");
                  responseFn( a );
              },

              select: function(value, data){
                  if (typeof data == "undefined") {
                      addMessage('You selected: ' + value + "<br/>");
                  }else {
                      addMessage('You selected: ' + data.item.value + "<br/>");
                  }
              }
          });
      });

    function addMessage(msg){
        $('#msgs').append(msg);
    }



HTML:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script class="jsbin" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  </style>
  
    <style type="text/css" media="screen">

    h1 { font-size: 20pt; color:Navy; }
    h2 { font-size: 18pt; font-weight:bold; color: #DDD; }

    body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
    body { margin:0; padding:0; height:100%;}

    .ui-widget { font-size: 0.8em; line-height:0.6em; }
    .ui-widget .ui-widget { font-size: 0.7em; }

    div.inputDiv  {
         float: left;
         width: 42%;
         height: 400px;
         min-height: 100%;
         border: Navy 1px dotted;
         margin: 14px;
         padding: 10px;
    }

    </style>
</head>
  <body>
    <div class='inputDiv'>
      <h1>jQueryUI Autocomplete demo</h1>
      <p>Type a few characters of a word</p>
      <form action="jquery" id="form1">
        <input type="text" id="input1"/>

      </form>
    </div>

    <div id='msgs' class="inputDiv" style='font-size:10pt;font-weight:normal;'>
    </div>

  </body>
</html>


нашел на гитхабе данный код - все работает, но мне нужно вместо данных в переменной wordlist выводить данные из внешнего файла. И еще подскажите как вывести на передний план появляющееся выпадающее меню. Ато у меня другие div закрывают его. Пробывал z-index - не получилось у меня что-то.
вот ссылка на пример: Жмяк для просмотра
...
Рейтинг: 0 / 0
02.09.2013, 13:18
| Ответить | Цитировать | Написать  
JQuery autocomplete c подсветкой
    #38384507
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
vip-y,

Ну, PHP я думаю может составить этот массив из файла. Или на чем у вас там. А на счет перекрытия - не увидел этих дивов.
...
Рейтинг: 0 / 0
02.09.2013, 18:09
| Ответить | Цитировать | Написать  
JQuery autocomplete c подсветкой
    #38384806
Фотография vip-y
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vip-y
Участник
Gustly, спасибо за ответ
да php то может, но мне нужно обрабатывать события Onclick и т.д., на php такое не прокатит
как получить массив в переменную я разобрался:
Код: javascript
1.
2.
3.
4.
5.
var cardRules = new Array();
    $.get('autocomplete.dat', function(data){
            cardRules = data.split('\n');
            console.log(cardRules);
        });


м.б. кто знает как работать с файлом напрямую...
у меня есть код рабочий, который берет данные из файла, но я пробывал применить к данному случаю - ничего не работает
принцип прост,
Код: javascript
1.
$("#input1").autocomplete("1.txt",{

, но у меня код отличается на порядок
...
Рейтинг: 0 / 0
03.09.2013, 00:34
| Ответить | Цитировать | Написать  
3 сообщений из 3, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JQuery autocomplete c подсветкой
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=121&tid=1447924]:
 0ms
get settings:
 10ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 76ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 46ms
get tp. blocked users:
 2ms
others: 246ms
total:  424ms
созд. / загр.: 424ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]