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

Question

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

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

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

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

与下面类似，但没有文本，仅包含框形图像：

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. 控制器：_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); } 

3. 视图：首先，这是我尝试使用Javascript的尝试。 我正在尝试从上方的“单词”控制器返回“单词”的列表，并将其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. 如果未定义自动完成功能或无法调用以下功能，则以下链接将很有用。 自动完成不是功能错误

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