使用图像向 MVC 应用程序中的搜索框添加自动完成功能

Posted 2023-05-08

【中文标题】使用图像向 MVC 应用程序中的搜索框添加自动完成功能

【英文标题】：Adding autocomplete using images to a search box in a MVC application

【发布时间】：2018-05-28 21:45:29

【问题描述】：

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

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

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

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

与下面类似，但没有文字，只有方框图：

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

我不熟悉这里的代码，因为我不熟悉 Ajax 和 javascript，我理解这是实时实现这一点所必需的。

我的尝试概述如下：

数据库模型： 该表本质上是这样的：

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

控制器： _context 是数据库。 控制器名称为“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);

查看： 首先，这是我对 Javascript 的尝试。我试图从上面的“Words”控制器返回一个“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/

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

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

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

我猜你也忘了返回标题：

 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);

【讨论】：

好的！我想我们已经接近了，名单正在发挥作用。但是，内部 HTML 没有正确附加，我收到一个字符串列表而不是图像。你还能让我辨别出什么是错的吗？谢谢。

您使用与我发布的完全相同的 js 脚本还是另一个？如果是另一个，那么你能发布它吗

和你的一样。

你能更新你的代码吗，对我来说会更容易。您使用的 js 库也很有趣

当然，我已经更新了我的代码并包含了相关的脚本。前两个 Jquery 脚本实际上包含在一个包中，但我已将它们以脚本形式放置以方便将来参考。