Jquery UI 自动完成图像

2024-03-20

我在这段代码中遇到错误。有谁能够帮助我?

<h4>search:<input type="text" id="name-list" /></h4>
<script type="text/javascript" language="javascript">
$(function () {
        $("#name-list")
    .autocomplete({
        source: function (request, response) {
                $.ajax({
                url: "/Home/Searchuser", type: "POST", dataType: "json",
                data: { searchText: request.term, maxResults: 10 }
            })

            return false;

        },

        minLength: 1

        }).data("autocomplete")._renderItem = function (ul, item) {
        var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.PicLocation + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.DisplayName + '</div></div></a>';
                                 return $("<li></li>")
                                .data("item.autocomplete", item)
                                .append(inner_html)
                                .appendTo(ul);
    };

    });
</script>

从服务器正确接收数据。我哪里做错了?


@JoeFletch 感谢您的帮助。

我对代码进行了这些更改,然后效果很好。 这是我使用的一些CSS。

<style type="text/css">
DIV.list_item_container {
height: 90px;
padding: 0px;
    }
    DIV.image {
width:90px;
height: 90px;
float: left;
    }
    DIV.description {
font-style: italic;
font-size: 1.1em;
color: gray;
padding: 5px;
margin: 5px;
    }

#name-list
{
    width: 300px;


    }
</style>

这是我的脚本

$(document).ready(function () {
        $('#name-list').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/Searchuser",
                    data: { searchText: request.term, maxResults: 10 },
                    dataType: "json",
                    success: function (data) {

                        response($.map(data, function (item) {
                            return {
                                value: item.DisplayName,
                                avatar: item.PicLocation,
                                rep: item.Reputation,
                                selectedId: item.UserUniqueid
                            };
                        }))
                    }
                })
            },
            select: function (event, ui) {

                                 alert(ui.item ? ("You picked '" + ui.item.label)
                                                          : "Nothing selected, input was " + this.value);

                return false;
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.avatar + '"></div><div class="label"><h3> Reputation:  ' + item.rep + '</h3></div><div class="description">' + item.label + '</div></div></a><hr/>';
            return $("<li></li>")
                    .data("ui-autocomplete-item", item)
                    .append(inner_html)
                    .appendTo(ul);
        };


    });

谢谢@乔。我更新了答案。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery UI 自动完成图像 的相关文章

随机推荐

  • r 结合ggRadar和facet_wrap

    下面的代码说明了我的问题 我想在 ggiraphExtra 中使用 ggRadar 函数 因为它允许与图形交互 我想要每种营养素有一个单独的蜘蛛图 并且我希望每个蜘蛛图每年都有一组单独的连接点 据我现在了解 在 ggRadar 中 代码ma
  • JBoss 7.1.1 Http 连接超时

    我正在尝试为 JBoss 7 1 1 设置 http 连接超时 但我无法在standalone xml 中找到更改此设置的位置 有谁知道我可以在哪里更改 60 秒的默认设置吗 您可以通过系统属性配置 HTTP 连接器的连接超时 org ap
  • `__unicode__()` 添加在 Django 教程中的基本民意调查应用程序中不起作用

    在安装了 Django 的开发源以及源代码中的 PostgreSQL 以及源代码中所需的所有其他内容之后 我正在学习 Django 教程 我正在尝试在 Ubuntu 12 10 上使用 python3 而不是 python 来完成所有操作
  • Windows 7 中两个进程如何监听同一端口?

    我在 Windows 7 中运行两个 stunnel 实例 配置为侦听同一端口 并且它们似乎都成功侦听同一端口 仅使用 socket bind listen 两个实例的所有调用似乎都成功 并且它们显示在 netstat 中 C gt net
  • Angular2 在 IE 中显示 null

    我在 Angular2 组件中有以下内容 div div Chrome 和 Safari 工作正常 但 IE 显示null在 DIV 中 我不知道为什么 标题是undefined 仔细检查 Angular2 中正确的语法应该是 div di
  • 服务端渲染如何兼容单页应用?

    我的问题是 我无法理解像 Next js 这样的服务器端渲染单页面应用程序框架如何在前端接收预渲染的完整 HTML 而无需重写整个页面 例如 nextjs 网站声明如下 默认情况下 Next js 预渲染每个页面 这意味着 Next js
  • 如何在内容脚本中的 Chrome 扩展上使用 @font-face

    由于我无法使用chrome extension getURL 在 CSS 文件上 如何将 font face 与本地字体文件一起使用 下面是如何在 css 中获取本地路径 body background image url chrome e
  • Django Admin:仅对一个模型字段使用自定义小部件

    我有一个日期时间字段 https docs djangoproject com en dev ref models fields django db models DateTimeField我的模型中的字段 我想将其显示为 Django 管
  • Websocket 服务器端点出现错误

    这是文件 我收到编译错误import javax websocket行和在 serverEndpoint websocket 为什么不带注释 package pack exp import java io IOException impor
  • 将值添加到 DynamicTimeSeriesCollection 中的指定系列

    该程序每秒都会接收数据并将它们绘制在时间序列图表上 然而 一旦我创建了两个系列 我就无法为其添加新的价值 它仅显示一条直线 如何将数据附加到指定的系列 IE YYY 基于此example https stackoverflow com a
  • 使用 OpenCV 级联分类器与交通标志

    我正在尝试检测一些这样的交通标志 https i stack imgur com yOTZb jpg https i stack imgur com yOTZb jpg 我设法隔离了交通标志 目前它始终是圆形的 http image noe
  • 如何获取进程的内存使用百分比?

    使用以下代码 我可以获得给定进程的内存消耗 以 MiB 为单位 def memory usage psutil return the memory usage in MB import psutil process psutil Proce
  • iOS上传.pdf文件

    如何使用 iOS 版 Objective C 上传文件 我真的被困住了 我可以使用 UIImagePickerController 上传图像 但是 pdf doc 文件有这样的功能吗 提前谢谢了 不 没有 假设您的意思是属于 iBooks
  • Yii2 环境文件夹背后的想法是什么以及如何使用它?

    我已经通读过 Yii2 文档好几次了 我也用谷歌搜索 但还没有找到任何有用的东西 问题是我不理解环境文件夹的概念 请让我解释一下 我可以在 Git 中使用分支 用于开发 登台和生产 local conf文件会被 Git 忽略 并且不会以任何
  • 为 cocoapod 依赖项指定预处理器宏,而不分叉它

    我有一个 Xcode 工作区 由Cocoapod对外部库有一些依赖 其中之一 MTDates https github com mysterioustrousers MTDates 延伸NSDate and NSDateComponents
  • Gravatar:如何知道用户是否拥有真实图片

    我已经在我的网站上使用了头像服务 但我想知道用户是否上传了他们的照片 有办法知道这一点吗 构造URL时 使用参数d 404 如果用户未设置图片 这将导致 Gravatar 返回 404 错误而不是图像 如果您使用从 gravitar 站点链
  • 将整数转换为单词

    为了设计数据可视化样式 我希望能够使用单词显示整数 例如 两千一十七 而不是数字 例如2017 作为我正在寻找的示例 这里有一个适用于小标量整数的快速函数 int to words lt function x index lt as int
  • AppFabric 缓存 - 对象的序列化和反序列化要求是什么?

    问题 当缓存类的实例并立即将其从缓存中取出时 我取回了对象 它不为空 但其所有属性 字段均为空或默认值 cacheHelper PutInCache testModuleControlInfoOne mci mci has populate
  • 在 JavaScript 中解析 ISO 8601 日期

    我需要有关将具有以下结构的 ISO 8601 日期转换为 JavaScript 的帮助 提示 CCYY MM DDThh mm ssTZD 我想像这样设置日期格式 January 28 2011 7 30PM EST 我想让这个解决方案尽可
  • Jquery UI 自动完成图像

    我在这段代码中遇到错误 有谁能够帮助我 h4 search h4