Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Стол заказов » Автокамплит для xfield. Срочно

Автокамплит для xfield. Срочно


 Lady    07.08.2014    Стол заказов    2218    13 комментариев

Доп. поля на странице добавления новости выводятся не общим тегом, а по отдельности, так например:

<input type="text" name="xfield[obl]" id="xfield[obl]" value="">


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

Все варианты должны браться из текстового файла или же просто списком из кода. Их будет не очень много.
Обязательно должна быть возможность множественного выбора через запятые.

Искала, пыталась своими силами, но увы, не вышло. Нашла неплохой вариант: http://recens.ru/jquery/plugin_auto_complete.html (там вторая форма - множественный выбор - очень даже подходит). Необходимо реализовать нечто подобное на дле.

13 комментариев

FastFud
Юзер

FastFud - 7 августа 2014 02:29 -


Lady
Юзер

Lady - 7 августа 2014 02:38 -

FastFud, я нашла массу вариантов, но они все не работают или неправильно работают в addnews...

Например, вот:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>
$(function() {
var availablemags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"javascript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#mags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availablemags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>


<div class="ui-widget">
<label for="mags">Tag programming languages: </label>
<input id="mags" size="50">
</div>


Рабочий код, который прекрасно функционирует в addnews. Но! Для поля mags. Как только я меняю на xfield[obl] - не работает((( Я уже сутки бьюсь над этим вопросом

Lady
Юзер

Lady - 7 августа 2014 02:43 -

Т.е. все дело в квадратных скобках xfield[obl].
Это можно как-то обойти?

FastFud
Юзер

FastFud - 7 августа 2014 02:45 -

А если так:
$( "#xfield_holder_text input" )

<tr id="xfield_holder_text" uid="essential">
<td class="xfields" colspan="2"><input type="text" name="xfield[text]" id="xfield[text]" value="" rel="essential">&nbsp;&nbsp;(обязательно)</td>
</tr>

Lady
Юзер

Lady - 7 августа 2014 03:01 -

В коде три вхождения mags:

$(function() {
var availablemags = [

$( "#mags" )

availablemags


Нужно все заменить на xfield_holder_text input?

FastFud
Юзер

FastFud - 7 августа 2014 03:08 -

Как угодно, если будет несколько полей то да, + к тому что придется для каждого поля писать такой же код или же придумать чтобы был один код который обрабатывал несколько полей.

FastFud
Юзер

FastFud - 7 августа 2014 03:12 -

Для начала попробуйте с один элементом а я посмотрю как упростить это дело.

Lady
Юзер

Lady - 7 августа 2014 03:18 -

Но ведь mags и id в input должны совпадать, иначе подсказки не выводятся

...Пробовала - увы, не вышло. Единственный выход, который я вижу, как-то заставить скрипт читать квадратные скобки в имени xfield.

FastFud
Юзер

FastFud - 7 августа 2014 03:29 -


Lady
Юзер

Lady - 7 августа 2014 03:30 -

Урааа! Нашла решение! Делюсь, может пригодится кому:

В
<input type="text" name="xfield[obl]" id="xfield[obl]" value="">
заменяем id="xfield[obl]" на id="xf_obl". Это же значение xf_obl прописываем в коде вместо mags. И все работает :)

В данный момент скрипт такой:

<script>
$(function() {
var availablexf_obl = [
"ActionScript",
"AppleScript",
"Asp"
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#xf_obl" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availablexf_obl, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>


Для вывода использую:
<div class="ui-widget">
<label for="xf_obl">Название: </label>
<input type="text" name="xfield[obl]" id="xf_obl" value=""></div>



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

upd: вижу по ссылке выше, как сделать для нескольких элементов. Спасибо вам большое!

ПафНутиЙ
Админ

ПафНутиЙ - 7 августа 2014 12:05 -

На данный момент самый достойный вариант автокомплина на мой взгляд, легко разобраться, есть аякс из коробки и прочие плюшки.

Каков вопрос - таков и ответ. Просто помните об этом.

fh79655l123
Юзер

fh79655l123 - 7 августа 2014 20:10 -

Можно ли как то для автозаполнения использовать все титлы новостей или лучше сделать все титлы отдельной категории??

ПафНутиЙ
Админ

ПафНутиЙ - 7 августа 2014 20:13 -

плагин на вход принимает любые, правильно сформированные, даные (лучше конечно, если это будет json массив)

Каков вопрос - таков и ответ. Просто помните об этом.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх