Pole tekstowe z sugestiami rozwijanymi

Question

Mam obecnie listę rozwijaną databound na mojej stronie ASP.Net C# 2.0, która ma około 400 pozycji w nim. Chcę go zastąpić czymś podobnym do pola tekstowego w wyszukiwarce Google, w którym wpisujesz literę i tylko wpisy zaczynające się od tych liter pojawiają się

co to jest dobry sposób na ich wdrożenie? Czy istnieją już kontrole, które ktoś może zasugerować?

Answer 1

Spójrz na http://docs.jquery.com/Plugins/Autocomplete

tutaj także jest tutorial do użytku z ASP.NET

Answer 2

Jeśli są one znane enrties można użyć jQuery, a na onUpdate imprezy:

1. jeśli jest to długa lista, zrób wniosek Ajax na swój serwer internetowy, pobierz najlepszą opcję
2. jeśli jest to krótka lista, możesz załadować wszystkie opcje na stronę i zaoferować opcjonalne teksty bez makin g żądanie serwera.

Sprawdź bibliotekę JQuery pod kątem implementacji sposobu wyświetlenia sugestii.

Answer 3

Istnieje przedłużacz AutoComplete jako przeszłość zestawu AJAX Control Toolkit dla ASP.NET. Istnieje wiele różnych opcji, które można ustawić dla buforowania klienta, interwału opóźnienia. Po prostu wskaż go w serwisie internetowym lub metodzie strony i odejdź.

Answer 4

check complete.ly zbyt

http://complete-ly.appspot.com/

ma żadnych zależności i ciężary bardzo niewiele.

Answer 5

TextBoxValueToDropDownList

function AddNames(text) { 

     if (document.myForm.insertText.value == "") { 
      document.getElementById("insertText").style.border = "1px solid red"; 
      return false; 
     } 
     else { 
      var option = document.createElement("OPTION"); 
      option.text = text.value; 
      option.value = text.value; 
      document.getElementById("dropDownList").options.add(option); 
      document.myForm.insertText.value = ""; 
      document.getElementById("insertText").style.border = "1px solid green"; 
     } 
    } 




    <form name="myForm"> 
     <table> 
      <tr> 
       <td> 
        <input type="text" name="insertText" id="insertText" /></td> 
       <td></td> 
       <td> 
        <select name="dropDown" id="dropDownList"> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="button" value="Insert" id="button" onclick="AddNames(insertText);" /></td> 
      </tr> 
     </table> 
    </form> 

Answer 6

Jednym ze sposobów, aby to zrobić za pomocą HTML5 (dla małych zbiorów danych oczywiście) jest datalist:

<input list="users" name="users"> 
    <datalist id="users"> 
    <option value="Alice"> 
    <option value="Bob"> 
    <option value="Chuck"> 
    <option value="Chris"> 
    <option value="Duke"> 
    <option value="Emily"> 
    </datalist> 

przypadku większych zbiorów danych AJAX jest lepsza droga.