Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Быстрый подбор

Автор: Date 13.4.2009, 09:26

Добрый день!

Столкнулся со следующей проблемой:

Есть таблица в MySQL в ней количество записей переросло за 26 000.
В web-форму данные из этой таблицы попадают следующим образом

Код


<select name="D1" size="48" multiple="multiple" class="textfield">
<?
$query = "SELECT * FROM  goods";
$n=0;
$result=mysql_query($query, $link);
print mysql_error();
while ($row = mysql_fetch_array($result)) { print '<option value='.$row['id'].'>'.substr($row['name'], 0, 40).'</option>'; };
?>
</select>

Передается 1.6 Мб. Это очень долго особенно если клиент сидит на dial-up’е.

Предполагаю сделать так, положить на форму:

<input type="text" name="name" size="20">

Когда пользователь вводит туда название в <select> попадают те записи первые символы которых соответствуют в веденным в <input>.

Но знаний по JS нет совсем. и как решить проблему не знаю, время жмет.

Заранее благодарю!

Автор: comtat 13.4.2009, 09:33

А если просто сделать постраничный вывод ???

Автор: Date 13.4.2009, 09:38

Цитата(comtat @ 13.4.2009, 12:33

)

А если просто сделать постраничный вывод ???

я делал но там очень много страниц получатся. пользователи ругаются.

Автор: Michael.de 13.4.2009, 22:46

Date, требуется просто прочитать значение <input> и передать на сервер или что-то ещё?
Посмотри, может эта тема пригодится: http://forum.vingrad.ru/topic-237800.html

Автор: Date 14.4.2009, 09:55

Michael.de, я посмотрел ваш пример. переделал его под свои нужды получилось вот что:

сначала заполняем массив:

Код


$query = "SELECT * FROM  goods limit 1000";
$n=0;
$arr=array();
$result=mysql_query($query, $link);
print mysql_error();
while ($row = mysql_fetch_array($result)) 
{ $arr[]="'".$row['name']."'"; };
$str = implode(" , ",$arr);

Код


<script type='text/javascript'>
var field, array;
function init(){
 field=document.getElementById('f');
 array=[
<? print $str?>
 ];

}
</script>

далее функция поиска:

Код


<script type='text/javascript'>
/ Функция использует массив 'array' и значение input-а 'field'.
// Возвращает список элементов, начинающихся со значения input-а.
function getList(){
 var ret=[], text=field.value, i;
 for (i=0; i<array.length; i++){
  if (array[i].substr(0,text.length).toLowerCase() == text.toLowerCase()){
   ret.push(array[i]);
  }
 }
 // <-- This part of the code is not needed. Only to check. //////////////////////////////
 var show='Full array:\n';
 for (i=0; i<array.length; i++) {show+='\"'+array[i]+'\"'; (i+1)%5?show+=', ':show+='\n';}
 show+='\nFind:\n'; for (i=0; i<ret.length; i++) 
 document.selectForm.D1.options[i].text=ret[i]; 
 ////////////////////////////// This part of the code is not needed. Only to check. --> //
 return ret;
}
</script>

вставляю <input id='f' onkeyup='getList();' size="20">

страница грузиться быстро и все работает как надо.
НО если я делаю поиск например по 500 элемент, страница подвисает.

может можно выйти из этой ситуации?

Автор: Michael.de 14.4.2009, 16:51

Date, я уже совсем запутался:
1. строки 11-16 из твоего последнего листинга для чего нужны? У меня они служили только для того, чтобы сгенерировать alert() для юзера... массив получался замечательно и без них smile

Код


 // а это точно работает (скрипт в скрипте) ???
 array=[
  <? print $str?>
 ];

Предлагаю следующее: юзер ввёл что-то в поле ввода. Из БД достаются все подходящие к первой букве (знаку) записи и отсылаются юзеру (как массив значений). На его компьютере (в соответствии с напечатанным в инпуте) к уже существующему select-у добавляются option-ы со значениями из array. Если юзер стёр всё написанное (изменился первый знак в инпуте) - запрашивается новый массив. Как из уже существующего массива достать нужные нам значения - я показал в том примере. Вот пример для добавления option-ов к select-y:

Код

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>JavaScript: add option</title>
<script type='text/javascript'>
var field, array;
function init(){
 field=document.getElementById('f');
 array=[
  'Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut',
  'Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa',
  'Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan',
  'Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire',
  'New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio',
  'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota',
  'Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia',
  'Wisconsin','Wyoming'
 ];
}

function showSelect(){
 var arr=[], text=field.value, s, o, i;
 for (i=0; i<array.length; i++){
  if (array[i].substr(0,text.length).toLowerCase()==text.toLowerCase()) arr.push(array[i]);
 }
 s=document.getElementById('s');
 var lCh=s.lastChild;
 while (lCh!=null){
  i=lCh.previousSibling;
  s.removeChild(lCh);
  lCh=i;
 }
 for (i=0; i<arr.length; i++){
  o=document.createElement('option');
  o.innerHTML=arr[i];
  s.appendChild(o);
 }
}
</script>
</head>
<body onload='init();'>
<select id='s' style='position:absolute;left:100px;top:100px;border:1px solid #AAE'></select>
<input id='f' onkeyup='showSelect();' style='background-color:#EEF; border:1px solid #00A'>
</body>
</html>

P.S. Исправил ф-цию showSelect() - перед добавлением новых option-ов необходимо было удалить уже существующие smile

Автор: Date 16.4.2009, 10:45

Цитата(Michael.de @ 14.4.2009, 19:51

)

1. строки 11-16 из твоего последнего листинга для чего нужны? У меня они служили только для того, чтобы сгенерировать alert() для юзера... массив получался замечательно и без них

да можно и без них.. но кушать не просят пусть будут smile

Цитата(Michael.de @ 14.4.2009, 19:51

)

array=[ <? print $str?> ];

точно работает, зря бы не писал... изврат конечно ну на первое время пойдет;

Дорогие друзья, проблема была решена немного по другому...

был создан скрипт на php для поиска... если кому интересно могу сбросить код пишите в личку...
писать не буду потому что не по теме...

Всем спасибо!
Michael.de, отдельное спасибо за то что повозился со мной и кодом!