如何在ASP.NET和外部數據源中使用jQuery的UI自動完成功能？

我一直在試圖把這些片斷放在一起並且有麻煩。如何在ASP.NET和外部數據源中使用jQuery的UI自動完成功能？

組件：

ASP.NET Web應用程序
MS SQL數據庫和表
C＃類get和所有表列設置
jQuery和jQuery用戶界面庫

該場景：

我有一個文本框，我想自動完成。
一旦文本框填充，用戶點擊「添加」（理想情況下，我需要返回該項目的ID，但我只是想獲得它的工作）

我不是什麼肯定的是數據是如何填充的。 jquery文檔說我應該有一個源URL。以下工作正常。

<script> 
    $(function() { 
     var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
       ..... 
       ..... 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 
     $("#autoComplete").autocomplete({ 
      source: availableTags 
     }); 
    }); 
</script>

但是，當我與外部源更換陣列它不工作：

<script> 
$(function() { 
    $("#autoComplete").autocomplete({ 
     source: "http://localhost:61639/ProjectName/AutoCompleteContent.htm" 
    }); 
}); 
</script>

這是AutoCompleteContent.htm

<!DOCTYPE> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
[ 
    "ActionScript", 
    "AppleScript", 
      ..... 
      ..... 
    "Ruby", 
    "Scala", 
    "Scheme" 
] 
</body> 
</html>

的HTML

這是我的問題：

我不確定頁面上的數據應該是什麼樣子。
我當然不知道如何以自動完成的有效格式顯示我的數據庫數據來接受它。

我想我要走正確的道路，但不知道。有人能說出這些步驟嗎？

我非常感激！

來源

2011-10-26 Barrett Kuethen

按照documentation，使用URL作爲源時，該響應將需要JavaScript數組：

當使用一個字符串，自動完成插件期望字符串以指向一個URL將返回JSON數據的資源。它可以位於同一臺主機上或不同的主機上（必須提供JSONP）。請求參數「term」被添加到該URL。數據本身可以採用與上述本地數據相同的格式。

那麼，您的網址將不得不要的東西，它返回一個JavaScript數組，不一個簡單的HTML頁面，就像你正在使用。這是一個使用ASP的工作示例。NET處理程序（我叫它autocomplete.ashx）：

<%@ WebHandler Language="C#" Class="autocomplete" %> 

using System; 
using System.Web; 
using System.Web.Script.Serialization; 
using System.Linq; 

public class autocomplete : IHttpHandler 
{ 

    public void ProcessRequest(HttpContext context) 
    { 
     context.Response.ContentType = "application/javascript"; 

     //load your items from somewhere... 
     string[] items = 
     { 
      "ActionScript", 
      "AppleScript", 
      "Ruby", 
      "Scala", 
      "Scheme" 
     }; 

     //jQuery will pass in what you've typed in the search box in the "term" query string 
     string term = context.Request.QueryString["term"]; 

     if (!String.IsNullOrEmpty(term)) 
     { 
      //find any matches 
      var result = items.Where(i => i.StartsWith(term, StringComparison.CurrentCultureIgnoreCase)).ToArray(); 
      //convert the string array to Javascript 
      context.Response.Write(new JavaScriptSerializer().Serialize(result)); 
     } 
    } 

    public bool IsReusable 
    { 
     get 
     { 
      return false; 
     } 
    } 
}

HTML和JavaScript：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Auto complete demo</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $("#tags").autocomplete({ 
       source: '/autocomplete.ashx' 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <input type="text" id="tags" /> 
</body> 
</html>

來源

2011-10-26 19:19:44 wsanville

謝謝你，這絕對是我需要澄清。但是，該數組仍然不被jquery的自動完成接受。「{」與「[」與它有什麼關係？這可以改變嗎？ –

我更新了我的C＃，併爲HTML和Javascript提供了一個工作示例。試試看。 – wsanville

嗯......我的新代碼出現XML解析錯誤。但是，無論我在書中輸入的文本框中輸入的內容是什麼，我都得到了整個數組的填充。 –

如何在ASP.NET和外部數據源中使用jQuery的UI自動完成功能？

回答

相關問題