2010-04-22 2 views
1

Я столкнулся с проблемой, которую я просто не могу решить. Я использую плагин autocomplete для jQuery на входе. HTML выглядит примерно так:jQuery автозаполнение. Не выявлено существующих совпадений

<tr id="row_house" class="no-display"> 
     <td class="col_num">4</td> 
     <td class="col_label">House Number</td> 
     <td class="col_data"> 
      <input type="text" title="House Number" name="house" id="house"/> 
      <button class="pretty_button ui-state-default ui-corner-all button-finish">Get house info</button> 
     </td> 
    </tr> 

я уверен, что это только id="house" поле. Другие поля, которые перед этим работают отлично с автозаполнением, и это в основном тот же алгоритм (другие переменные, другие данные, другие вызовы). Так почему он не работает, как будто он должен работать со следующим init. Код:

$("#house").autocomplete(["1/4","6","6/1","6/4","8","8/1","8/5","10","10/1","10/3","10/4","12","12/1","12/5","12/6","14","14/1","15","15/1","15/2","15/4","15/5","16","16/1","16/2","16/21","16/2B","16/3","16/4","17","17/1","17/2","17/4","17/5","17/6","17/7","17/8","18","18/1","18/2","18/3","18/5","18/95","19","19/1","19/2","19/3","19/4","19/5","19/6","19/7","19/8","20","20/1","20/2","20/3","20/4","21","21/1","21/2","21/3","21/4","22","22/9","23","23/2","23/4","24","24/1","24/2","24/3","24/A","25","25/1","25/10","25/2","25/4","25/5","25/6","25/7","25/8","25/9","26","26/1","26/6","27","27/2","28","28/1","29","29/2","29/3","29/4","30","30/1","30/2","30/3","31","31/1","31/3","32/A","33","34","34/1","34/11","34/2","34/3","35","35/1","35/2","35/4","36","36/1","36/A","37","37/1","37/2","38","38/1","38/2","39/1","39/2","39/3","39/4","40","40/1","41","41/2","42","43","44","45","45/1","45/10","45/11","45/12","45/13","45/14","45/15","45/16","45/17","45/2","45/3","45/6","45/7","45/8","45/9","46","47","47/2","49","49/1","50","51","51/1","51/2","52","53","54","55/7","66","109","122","190/8","412"], {minChars:1, mustMatch:true}).result(function(event, result, formatted) { 
       var found=false; 
       for(var index=0; index<HChouses.length; index++) //HChouses is the same array used for init, but each entry is paired with a database ID. 
        if(HChouses[index][0]==result) 
        { 
         found=true; 
         HChouseId=HChouses[index][1]; 
         $("#row_house .button-finish").click(function() { 
          QueryServer("HouseConnect","FillData",true,HChouseId); //this performs an AJAX request 
         }); 
         break; 
        } 
       if(!found) 
        $("#row_house .button-finish").unbind("click"); 
      }); 

Каждый раз, когда я начинаю печатать (скажем, я нажимаю кнопку «1»), текст отображается и удаляется мгновенно. Редко вообще после повторных прессов я получаю список (хотя и намного короче, чем он должен быть) alt text http://www.freeimagehosting.net/uploads/de3892134d.jpg

Но если после этого я нажимаю вторую цифру, все это снова исчезает. P.S. Я использую Firefox 3.6.3 для разработки.

+0

Попробуйте вместо этого использовать новый jQuery UI-плагин, посмотрите, что он покажет http://jqueryui.com/demos/autocomplete/ – AlexanderMP

+0

jQuery UI autocomplete работает, но не так, как будто я хочу, чтобы он работал. Он позволяет значения вне списка, не форматирует данные, выделяя согласованные последовательности. Все еще жду ответа на этот вопрос. – AlexanderMP

ответ

1

Похоже, что вы запрашиваете текстовое поле с использованием автозаполнения, которое при выборе значения выполняет некоторую функцию (QueryServer здесь) с идентификатором выбранного значения. Эффективно это динамическая версия ajaxy html <select>. Поправьте меня, если это не так.

Я сделал что-то подобное этому недавно с автозаполнением jQueryUI. Вы упомянули в своих комментариях, что вы пробовали это без везения, но я предполагаю, что вас интересует решение с использованием любой библиотеки. Вот как бы я это сделать:

$("house").autocomplete({ 
    source: [{'id': 1, 'value': '10/1'}, {'id': 2, 'value': '10/3'}, {'id': 3, 'value': '10/4'}, .... 
    minLength: 1, 
    select: function(event, ui) { 
     //input will auto-populate with "value" part 
     $("#row_house .button-finish").click(function() { 
      QueryServer("HouseConnect","FillData",true,ui.item.id);       
     }); 
    }, 
    //this next function is a hack to replicate the "mustMatch" functionality of the bassistance autocomplete plugin 
    change: function (event, ui) { 
     var source = $(this).val(); 
     var found = $('.ui-autocomplete li').text().search(source); 
     if(found < 0) { //no match! 
      $(this).val(''); 
      $("#row_house .button-finish").unbind("click"); 
     }    
    } 
}); 

Вы можете объявить source значения в другом месте, чтобы сделать его немного аккуратнее.

Надеюсь, что это поможет!

+0

Большое спасибо за ваш ответ. Я нашел функцию с передачей объекта вместо простой строки в источник автозаполнения. У меня нет времени, чтобы вернуться к этой последовательности и сделать все правильно. Основными 2 причинами, по которым я выбрал автозаполненный плагин над пользовательским интерфейсом, является тот факт, что текст выделяется для указания совпадений в строке и того факта, что я могу применять только строгие соответствия, в то время как функция пользовательского интерфейса действительно принимает любую строку. – AlexanderMP

+0

Это сделано так, что пользователь может выбрать дом из базы данных с помощью Autocomplete, а не выбирать (слишком много домов для окна выбора), а когда выбрано значение, которое присутствует в базе данных, кнопка рядом с выбором получает назначенную функцию, которая извлекает через AJAX информацию о доме. – AlexanderMP

+0

Параметр «change», который я передал функции autocomplete(), в моем примере реплицирует функциональность mustMatch плагина - принудительное выполнение только строгих совпадений. Имейте в виду, что, какую бы библиотеку вы ни выбрали, они оба являются javascript на стороне сервера. Пользователь может просто отключить javascript и отправить любые данные, которые им нравятся на сервере. Подчеркивание текста - это справедливая точка. – majackson

Смежные вопросы