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

Posted 2023-05-08

【中文标题】来自cshtml中SQL Server查询的jquery UI自动完成列表

【英文标题】：jquery UI autocomplete list from SQL Server query in cshtml

【发布时间】：2016-12-14 11:17:13

【问题描述】：

我正在关注这个 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 数组吗？

【参考方案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 );
);

【讨论】：

太棒了，代码更少，无需尝试显式构建看起来像带有双引号、方括号和逗号的数组的东西。