javascript - 将使用图像的自动完成添加到 MVC 应用程序中的搜索框

Question

我想知道是否有人可以帮助我。

我正在尝试为我的 MVC 应用程序创建一个搜索框，该搜索框会使用图像而不是文本自动完成(根据用户的输入提出建议)。

该功能将检查用户的输入是否类似于名为“Word”的 Entity Framework 数据库表中的“Title”属性，然后返回其“Imagepath”属性，这是图像的字符串路径。

然后应在 View 中使用此路径来返回自动完成用户查询的相关图像列表。然后可以点击这些图像并链接到它们各自的页面。

与下面类似，但没有文本，只有框图像:

https://www.algolia.com/doc/assets/images/guides/search-ui/autocomplete-textarea-8-2565ba67.png

我在处理这里的代码时遇到了困难，因为我不熟悉 Ajax 和 Javascript，我知道这是实时实现这一目标所必需的。

我的尝试概述如下:

1. 数据库模型: 该表基本上是这样的:

   public class Word
       {
         public int Id { get; set; }
         public string Title { get; set; }
         public string Imagepath { get; set; }
       }
   

2. Controller : _context 是数据库。 Controller 名称是“WordsController”。

   [HttpPost]
   public JsonResult AutoComplete(string Prefix)
   {
       var words= _context.Words.ToList();
   
       var specifiedWords = (from w in words
                             where w.Title.StartsWith(Prefix) || w.Title.Contains(Prefix)
                            select new { w.Imagepath });
   
       return Json(specifiedWords , JsonRequestBehavior.AllowGet);
   }
   

3. 查看: 首先这是我对 Javascript 的尝试。我试图从上面的“Words” Controller 返回“Words”列表，并将其 Imagepath 属性附加到试图创建某种列表的 HTML 元素。搜索框和 CSS 如下。

   <script src="~/Scripts/jquery-3.2.1.js"></script>
   <script src="~/Scripts/jquery.validate.js"></script>
   <link rel= "stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" > 
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   
   <script>
   $(document).ready(function () {
   $("#Title").autocomplete(
   {
       source: function (request, response) {
           $.ajax({
               url: "/Words/AutoComplete",
               type: "POST",
               dataType: "json",
               data: { Prefix: request.term },
               success: function (data) {
                   response($.map(data, function (item) {
                       return {
                           label: item.Imagepath,
                           value: item.Title
                       };
                   }));
               }
           });
       },
       open: (event) => {
           $('.ui-autocomplete .ui-menu-item div').toArray().forEach((element) => {
               let imagePath = element.innerHTML;
               $(element).html('');
               var inner_html = '<div class="list_item_container"><div class="image"><img src="' +
                   imagePath + '"></div>';
               $(element).append(inner_html);
           });
       }
   });
   });
    </script>
   

搜索框:

@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } }) 

CSS:

<style>
.list_item_container {
    width: 300px;
    height: 60px;
    padding: 5px 0;
}

.image {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    float: left;
}

不用说，我的最大努力还没有奏效。

JavaScript 大致取自此处的教程(仅涵盖单词自动完成:

http://www.jamiemaguire.net/index.php/2017/04/08/how-to-implement-an-autocomplete-control-with-asp-net-mvc-and-json/

任何有用资源的指针或链接将不胜感激。谢谢!

Answer 1

1. 设置打开。收到响应并呈现内容后打开触发器。

               {
               source: function(request, response) {
                   $.ajax({
                       url: '@Url.Action("AutoComplete", "Words")',
                       type: "POST",
                       dataType: "json",
                       data: { Prefix: request.term },
                       success: function (data)
                       {
                           response($.map(data, function (item)
                           {
                               return {
                                   label: item.Imagepath,
                                   value: item.Title
                                      }
                           }));
                       }
                   });
               },
               open: (event) => {
                   $('.ui-autocomplete .ui-menu-item div').toArray().forEach((element) => {
                       let imagePath = element.innerHTML;
                       $(element).html('');
                       var inner_html = '<div class="list_item_container"><div class="image"><img src="' +
                           imagePath + '"></div>';
                       $(element).append(inner_html);
                   });
               }
           }
   

2. 如果自动完成功能未定义或无法调用，以下链接将很有用 .autocomplete is not a function Error

3. 我猜你也忘了返回标题:

    var specifiedWords = (from w in words
           where w.Title.StartsWith(Prefix) || w.Title.Contains(Prefix)
           select new { w.Imagepath, w.Title });
   
       return Json(specifiedWords, JsonRequestBehavior.AllowGet);