2012-01-13 3 views
2

Я ищу, чтобы создать функцию поиска, похожую на google, используя jQuery. однако я не уверен в названии одной из его особенностей.jQuery Autocomplete/pred-like google

Эта особенность представляет собой элемент предсказания текста.

например. если я набираю jquery, он показывает в поле ввода «JQuery» как мой ввод, но затем в сером он добавляет текст первого результата в поле ввода и позволяет пользователю выбрать это «прогностическое значение»

Я искал высокой и низкой для названия этой функциональности и рабочего примера.

любая помощь будет принята с благодарностью

+0

Я думаю, это то, что вы ищете: http://stackoverflow.com/questions/3875079/jquery-and-grails-html-make-text-field-complete-text-like-google-does (вот пример: http://jsfiddle.net/QU9st/) – Quasdunk

+0

Может быть, это? http://www.devbridge.com/projects/autocomplete/jquery/ – pltvs

+1

Почти! но не совсем так, его нужно ввести в поле ввода со своим стилем, проблема, которую я испытываю, - это укладка предложения – Coops

ответ

7

Вы ищете полную функцию авто. Пользовательский интерфейс jQuery обладает удивительной функцией автозаполнения, включенной в нее.

http://jqueryui.com/demos/autocomplete/

Результат вашего поиска вы можете получить из массива или базы данных таблицы (через страницы сервера) .Это довольно прост в настройке, как показано ниже

в приведенном ниже примере используется массив в качестве источника данных для элементов автоматического предложения.

$(function() { 
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "Scheme" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 

Приведенный выше код связывает текстовое поле с идентификаторами «тегов» с функцией автозаполнения. мы упоминали исходное значение как имя нашего массива, где мы хранили разные имена языков программирования.

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

$("#tags").autocomplete({ 
      source: "searchtags.php", 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? 
        "Selected: " + ui.item.value + " aka " + ui.item.id : 
        "Nothing selected, input was " + this.value); 
      } 
     }); 
+0

Просто обновление. Ребята, я понимаю, что модуль автозаполнения JQuery UI, и это функциональность, которую я добавляю, однако этот вопрос спрашивает, как создать серость предлагаемый текст в поле INPUT. Я бы выложил снимок экрана, но SO не позволял мне это делать. – Coops

+0

@Coops: Чтобы иметь текст, предложенный в стиле, вы просто обновляете стиль CSS для этого элемента. Используйте firebug, чтобы узнать, что представляет собой текущий стиль и обновить CSS. thats it – Shyju

+0

Пробовал это, однако вы можете только стиль ввода, а не части текста внутри него. следовательно, ищет решение для javascript. – Coops

2

Что вы ищете это автозаполнения плагин. Есть целый ряд, но «официальные один» это JQuery автозаполнение: http://docs.jquery.com/Plugins/Autocomplete и код:

$("#example").autocomplete(data); 
+2

Нет, теперь это [jQuery UI one] (http://jqueryui.com/demos/autocomplete/). Но у меня все еще есть некоторые проекты, запускающие этот (bassistance.de one) – Rup

1

Самый близкий, который я нашел, это автозаполнение jQuery, вы когда-либо находили его, как Google?