2012-02-10 57 views
0

我試圖爲文本框實現自動完成組件。即時通訊使用jquery ui自動完成插件,它有點像一個下拉列表而不是自動完成的東西。關於JQuery UI自動完成和文本框建議。

我見過的工作,當用戶正在寫像的例子,它顯示了以下一些選項,而且還寫了第一個選項的補充選擇爲「HTML佔位符」,所以它看起來像:

|「IM SEARCHING SOMET_」堆棧溢出 |

(我知道你的想法)

我需要引導用戶對他的寫作,並迫使他選擇的是我提出(與JSON或東西)的項目之一,像真正的汽車 - 「完成」他正在寫的東西。我想在該插件上使用「selectFirst」屬性。它似乎沒有像它那樣。那麼,你們建議什麼?

我在想像在插件的「open」事件上寫一些代碼,但是Idk從哪裏開始。也許在那裏已經有了一些東西,所以我不必像這樣浪費一週的時間。

我的代碼已經是這樣的:提前

$(".destination").autocomplete({ 
      minLength: 2, 
      autoFocus: true, open: function(event, ui){ /* DO THE MAGIC HERE */ }, 
      source: function (request, response) { 
       $.ajax({ 
        url: "@Url.Action("SearchDestinations", "Json")", type: "POST", dataType: "json", 
        data: { term: request.term }, 
        success: function (data) { 
         response($.map(data, function(item){ 
          return { label: item.Description, value: item.Description, id: item.Id }; 
         })); 
        } 
       }) 
      } 
     }); 

感謝(和抱歉,如果這太noobish)!

回答

0

這不是自動完成文本框的非常常見的行爲,而且您還沒有詳細說明爲什麼要引導用戶進行選擇(您將如何知道第一個選項總是最佳?)。

如果確實設置了這樣的功能,請確保在用戶輸入之後以默認方式將默認文本的樣式設置爲方式,以便用戶看到他們鍵入的內容以及您的身份(請參閱谷歌即時通訊使用非常淺的文字來處理搜索結果,同時請注意谷歌不會試圖引導您的搜索,而是向您顯示即時搜索結果的用途)。用戶可能會也可能不會驚訝地發現在他們輸入的內容之後出現了額外的文本,並且鑑於他們的注意力集中在文本框上,他們可能傾向於接受作爲他們的輸入的內容,而不考慮出現在下面的其他選項可能更好。在進行用戶測試時,您需要考慮這兩點。

話雖這麼說,你可以用一個類似的選擇訪問的第一選擇項目的文本中自動完成下拉列表:

$(".ui-autocomplete li:first a").text(); 

然後,使用一般的JavaScript SUBSTR( )方法,您可以只抓取用戶輸入的內容後的文本,並在用戶輸入後將其顯示在文本框中。

+0

不確定第一選擇總是最好的。但應用程序的本質是必須做出選擇, – 2012-02-13 13:47:06

+0

如果您不能保證第一選擇是最好的,那麼聽起來您不應該設置應用程序來自動爲用戶選擇一個選項。此外,如果您的問題是您需要確保進行選擇,則應該爲表單添加有用的字段驗證,以確保用戶選擇一個選項,而不是強制選擇用戶。 – Derek 2012-02-13 15:37:42