Из autocomplete изменить SELECT [Архив форума]

Просмотр полной версии : Из autocomplete изменить SELECT

kot_k_k

17.06.2015, 10:34

Добрый день. Не ругайте - слабо шарю.
Есть SELECT и autocomplete - у них позиции совпадают, надо выбрать в автокомплите - взять номер (не значение в номер в списке) и присвоить SELECT этот номер, для того чтобы SELECT выбрал нужную у себя позицию.
Делаю так

<select name="intGlnID" id="id_n" style="font-size: 9px;" onchange="document.getElementById('ChooseGLNForm').submit()">
...........
</select>

<input type="text" name="varGlnText" id="varGlnText" value="{$search.varGlnText|escape}"/>

<script type="text/javascript">
var data = $("#autocompleteDiv").text().split("; ");
$("#varGlnText").autocomplete(data, {matchContains: 1});
$("#varGlnText").autocomplete({select:function(event,ui)
{
document.getElementById('id_n').options[ui.value].selected=true;
document.getElementById('ChooseGLNForm').submit()} });
</script>

собственно в чем проблема - как получить номер позиции в автокомплите (после выбора) - как я понял это одно из свойств ui (вот только какое - темный лес) и присвоить select с этим номером значение TRUE - т.е. выбрать.
явно вот тут :

document.getElementById('id_n').options[ui.value].selected=true;

неправильно - а как я не знаю:help:

рони

17.06.2015, 11:12

у них позиции совпадают
индексы или value совпадает?

kot_k_k

17.06.2015, 11:51

автокомплит:
<div id="autocompleteDiv" style="display: none;">
Иванов; Петров; Сидоров;
</div>

SELECT:
<select name="intGlnID" style="font-size: 9px;" onchange="document.getElementById('ChooseGLNForm').submit()">
<option value="2547">Иванов</option>
<option value="7458">Петров</option>
<option value="8521">Сидоров</option>
</select>

Вот и я хочу выбрав в комплите Петрова, который второй в списке автоматом выбрать в селекте Петрова, который тоже стоит вторым.

рони

17.06.2015, 11:53

kot_k_k,
ok:write:

рони

17.06.2015, 12:27

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

</head>

<body>

<input type="text" name="varGlnText" id="varGlnText" value=""/>

<select name="intGlnID" name="intGlnID" id="id_n" onchange="document.getElementById('ChooseGLNForm') .submit()">
<option value=2547>Иванов</option>
<option value=7458>Петров</option>
<option value=8521>Сидоров</option>
</select>

<script>
var sel = $("#id_n")[0];
$( "#varGlnText" ).autocomplete({
select: function(event, ui) { sel.value = ui.item.indx } ,
source: function( request, response ) {
response($.map(sel.options, function(item) {
return {
label: item.text,
value: item.text,
indx: item.value
}
}))
},
matchContains: 1
});
</script>
</body>
</html>

kot_k_k

17.06.2015, 13:39

трудно быть деревянным.
попробовал как предложили, не работает автокомплит - нет данных.
дело в том автокомплит и селект формируется при загрузке страницы

вот "весь" код этого сщазтья:

<div id="autocompleteDiv" style="display: none;">
{foreach from=$availableglns item=gln}
{$gln.varName} ({$gln.varGln});
{/foreach}
</div>
<form action="/" id="ChooseGLNForm" method="POST" style="margin: 0; padding: 0;">
<select name="intGlnID" id="id_n" style="font-size: 9px;" onchange="document.getElementById('ChooseGLNForm').submit()">
{foreach from=$availableglns item=gln}
<option value="{$gln.intGlnID}" {if $currentgln.intGlnID==$gln.intGlnID}selected{/if}>{$gln.varName} ({$gln.varGln})</option>
{/foreach}
</select>
<input type="text" name="varGlnText" id="varGlnText" value="{$search.varGlnText|escape}"/>
{literal}
<script type="text/javascript">
var data = $("#autocompleteDiv").text().split("; ");
$("#varGlnText").autocomplete(data, {matchContains: 1});
$("#varGlnText").autocomplete({select:function(event,ui){
document.getElementById('id_n').options[ui.value].selected=true;
document.getElementById('ChooseGLNForm').submit()} });
</script>
{/literal}
</form>

поэтому и пытаюсь сделать вот это:
document.getElementById('id_n').options[ui.value].selected=true;

т.е. заменив скирп и убрав <div id="autocompleteDiv" - не работает. почему?

может по другому сформировать div чтобы в него внести массив с label, index, value - а как я не знаю это оформить!!

Большое спасибо за участие.

п.с. тяжело после VBA.

рони

17.06.2015, 14:04

kot_k_k,
var data = $("#autocompleteDiv").text().split("; ");
$("#varGlnText").autocomplete(data, {matchContains: 1});
$("#varGlnText").autocomplete({select:function(event,ui){
var i = $.inArray(ui.item.value, data);
document.getElementById('id_n').options[i].selected=true;
document.getElementById('ChooseGLNForm').submit()} });
:(

kot_k_k

17.06.2015, 16:13

два вопроса (бо не выходит)
1. может не давать изменить SELECT - вот это в самом селекте
<option value="{$gln.intGlnID}" {if $currentgln.intGlnID==$gln.intGlnID}selected{/if}>

тут стоит условие на проверку смарти? хотя если выбираем в слекте руками - то работат!

2. чему должно быть равно i (логически)?
var i = $.inArray(ui.item.value, data);
- на сайте alert - не пашет и проверить ХЗ.

спасибо за понимание.

рони

17.06.2015, 16:40

kot_k_k,
код ранее то работал ?а то может так?
var data = $("#autocompleteDiv").text().split("; ");
$("#varGlnText").autocomplete(data,{matchContains: 1,select:function(event,ui){
var i = $.inArray(ui.item.value, data);
document.getElementById('id_n').options[i].selected=true;
document.getElementById('ChooseGLNForm').submit()} });

kot_k_k

17.06.2015, 17:25

в том то и дело что нет.
там какой-то умник воткнул выпадающий список - а кол-во записей во время тестовых работ (регулярных) - тысячи. на проде не больше 2-х-3-х.
поэтому найти нужную запись просто не реально, а надо.
вот сваял автокомплит.
может не соответствие тому что получаем в val i=.... и options[i].selected???

а не может быть это из-за того что "срабатывание" - т.е. запуск вот этого
document.getElementById('ChooseGLNForm').submit()

происходит только после нажатия ENTER в поле в котором работает автокомплит. т.е. когда я нажал мышью на выборке и значение заполнилось в поле input #varGlnText - ничего не происходит, пока не жмакнешь Энтер???

рони

17.06.2015, 17:50

kot_k_k,
более ничем помочь немогу

kot_k_k

18.06.2015, 10:50

решил.
из функции $("#varGlnText").autocomplete... - ничего с селектом сделать не удаллось, поэтому создал кнопку "Применить" на нее повесил вот это

$(document).ready(function() {
$("#buttonSave").click(function(){
var sel=$("#varGlnText").val();
$("#id_n").find("option:contains('" + sel + "')").attr("selected", "selected");
document.getElementById('ChooseGLNForm').submit();
})
})

и усё спокойно заработало.

Рони - большущеее спасибо.:dance: