Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подсказка при наборе текста (https://javascript.ru/forum/dom-window/52241-podskazka-pri-nabore-teksta.html)

PesBarbos 09.12.2014 19:43

Подсказка при наборе текста
 
Делаю подсказку при наборе текста:

arr - массив с подсказками, например ["мебель"]
value - строка с запросом пользователя, например "меб"

for (var i = 0; < arr.length; i++) // перебираем массив
    if (value == arr[i].substr(0, value.length)) // ищем совпадение
        // выводим подсказку "мебель"


Для запросов и элементов состоящих из одного слова это работает отлично, но есть же ещё и словосочетания.

Например, arr = ["мебель офисная"], по запросу "меб" найдёт, но по запросу "офисн" не найдёт.

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

arr2 = ["мебель", "офисная"]

Так и по "меб" найдёт и по "офисн" тоже. А по запросам "мебель офисная" и "офисная мебель" не найдёт!

Значит, думаю, нужно их добавить:

arr2 = ["мебель", "офисная", "офисная мебель", "мебель офисная"]

Но тогда отдельные то слова мне зачем?

В итоге получается что словосочетания нужно дробить на отдельные слова и перебирать их в новом массиве во всех возможных вариантах:

arr2 = ["офисная мебель", "мебель офисная"]

А если не 2, а 3 слова?

3 слова - 6 комбинаций
4 слова - 24 комбинаций
5 слов - 120 комбинаций
6 слов - 720 комбинаций

Помимо громадного количества комбинаций вылезает ещё проблема этой самой подсказки. Например по запросу "моск" будет вылезать подсказка "офисная мебель в москве". Ничего страшного, конечно, но хотелось бы видеть вводимое слово на первом месте, можно его конечно передвинуть в начало строки, но не всегда это выглядит нормально: "москве офисная мебель в", значит нужно переносить с предлогом: "в москве офисная мебель". Далее на горизонте уже маячит проблема того, что вся подсказка будет забита каким то мусором, в котором что то там в конце строки совпало.

В общем, тут я понял что изобретаю велосипед и решил спросить совета.

senex 09.12.2014 20:07

Посмотри здесь: http://jqueryui.com/autocomplete/

рони 09.12.2014 20:15

PesBarbos,
если вы не поисковик делаите, как яндекс, то достаточно поиска на 1слово -- а следующее слово если есть такая необходимость берите из того текста с которым работаите (или одно из следующих слов)- нет в вашем тексте офисной сковородки и не фиг тогда и хранить такую комбинацию

krutoy 09.12.2014 22:51

<html>
<head>
<meta charset="windows-1251" />
</head>
<body>
<input />
<div>
</div>
<script>

div=document.querySelector("div")
document.querySelector("input").oninput=function(){
 var re=new RegExp(this.value), text=""
 for(var i=0; i<arr.length; i++){if(re.test(arr[i])) text+=arr[i]+"<br>"}
 div.innerHTML=text
}
arr=[
"мебель офисная",
"стол компьютерный",
"стул мягкий"
]
</script>
</body>
</html>

danik.js 10.12.2014 04:16

<input type="text" list="suggestions">
<datalist id="suggestions">
    <option>мебель офисная</option>
    <option>стол компьютерный</option>
    <option>стул мягкий</option>
</datalist>

myshara 10.12.2014 08:27

Всем привет!

Уважаемые, krutoy и danik.js.

Все это хорошо. Но...
Но проблема в браузерах.
Погоняйте свой код (да и любое автодополнение) на Mozila,Opera, Safari и др.
Включите планшет и там через UC, Dolphin, Веб-браузер.
Ощутите всю "мощь" браузерных возможностей.
Сделай продукт кроссбраузерным!

P.S.:
Цитата:

Альберт Эйнштейн

Только те, кто предпринимают абсурдные попытки, смогут достичь невозможного.

krutoy 10.12.2014 12:25

Цитата:

Сообщение от myshara
Но проблема в браузерах.

Что из того, что я написал некроссбраузерно? RegExp? div? innerHTML?

myshara 10.12.2014 15:45

Уважаемый, krutoy.

Все что вы указали кросбраузерно... Но...

1) Я не говорил о вашем скрипте ничего.
2) В разных браузерах разный принцип автодополнения:
Пример
-Chrome: ищет только по полному соответствию вводимых символов относительно начала строки вхождения.
-Mozila: ищет подстроку в строке не зависимо от точки вхождения.
3) Для русского алфавита есть зависимость от регистра вводимых символов. Для английского нет.

Я вел речь о поддержке браузерами самого автодополнения как такового.
И все дело не в тегах HTML и синтаксиса Jquery или JavaScript, а именно в движке браузера.

Эксперементируйте. И увидите сами.

А насколько я понял, PesBarbos желал бы реализацию как в Mozila Firefox, и более того, регистронезависимую. Причем на любом из браузеров чтобы работало так, как задумано разработчиком, а не так, как хочет тот или иной браузер.

чтобы при вводе:
сту
мяг
СтУ
мЯг
Результат автодополнения(в любом случае):
стул мягкий

krutoy 10.12.2014 19:01

Цитата:

Сообщение от myshara
Я не говорил о вашем скрипте ничего.

Ну как же, в вашем посте было обращение и ко мне, в том числе.
Цитата:

Сообщение от myshara
PesBarbos желал бы реализацию как в Mozila Firefox

Не знаю, об этом ничего не написано, он вообще не просил никакую реализацию, он спрашивал, как сделать, чтобы автокомплит был не только по первому слову, я написал все это лишь для наглядности.
Цитата:

Сообщение от myshara
регистронезависимую

В моем скрипте это решается выставлением одного флага.


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