来自cshtml中SQL Server查询的jquery UI自动完成列表

Question

我正在关注这个 jquery ui 自动完成模板 (https://jqueryui.com/autocomplete/#default)，但试图从 SQL Server 数据库查询中提取我的数据以进行自动完成。

看起来当我使用我的 javascript 时，我需要我的 availableTags javascript 数组具有基于什么的 ["abc", "def", "ghi",..."] 形式在jquery ui demo源码中。

var availableTags = [
   "ActionScript",
   "AppleScript",
   "Asp",
   "BASIC", 
   "..."];

我的代码目前给我一个这样的列表：abc, def, ghi,...。实际上，当我将它传递给 javascript 变量时，我什至不确定它是否显示为 {abc, def, ghi,...} 或 [abc, def, ghi...]。

这是我从数据库中获取列表的代码

@{
List<string> availableTags = new List<string>();
foreach (var item in db.Query("SELECT Tag FROM my_tags_table"))
   {
    var Tag = item.Tag ;
    availableTags.Add(Tag);
    string tagString = (string.Join(", ", availableTags.Select(x => x.ToString()).ToArray()));
   }
  }

调试显示 tagString 被创建为列表 abc、def、ghi ......但正如我提到的，我需要在其中添加双引号。这是我将 tagString 传递给 javascript 数组/变量的方法。

 <script>
      $(function () {
      var availableTags = '<%=tagString%>';
            $("#tags").autocomplete({
                 source: availableTags 
            });
      });
 </script>

然后这是我的输入框。

 <div class="ui-widget">
    <input id="tags">
 </div>    

有人可以帮我 1) 添加双引号和 2) 执行可用标签所需的任何其他操作以显示为正确的 javascript 数组吗？

Answer 1

jQuery ui 自动完成需要源属性值作为一个数组。 string.Join 方法将返回一个用逗号分隔的字符串值，例如 Item1, Item2, Item3.

你需要的是一个数组。

@{
  List<string> availableTags = new List<string>();
  foreach (var item in db.Query("SELECT Tag FROM my_tags_table"))
  {
    var Tag = item.Tag ;
    availableTags.Add(Tag);       
  }
 }

在同一视图的脚本部分中，您可以将此 c# 变量（availableTags 列表）转换为 javascript 数组并使用它。

$(function () {

    var availableTags = @Html.Raw(Newtonsoft.Json.JsonConvert
                                                .SerializeObject(availableTags.ToArray()));
    $("#tags").autocomplete({ source: availableTags });
});