热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Jquery自动完成_renderItem无效

如何解决《Jquery自动完成_renderItem无效》经验,为你挑选了1个好方法。

_renderItem根本没有执行,尝试使用console.log也没有打印消息.尝试使用'autocomplete','ui-autocomplete','自动填充'属性没有希望.

另外我无法理解"用地图函数响应"的目的,所以禁用它.

$(document).ready(function () {

myVars.shId = $('#dataVar').attr('sh-data');

///// search ////// http://jsbin.com/xavatajiku/edit?js,output
console.log(myVars.shId);
$('#name-list').autocomplete({

        source: function (request, response) {
            $.ajax({
                url: myVars.czbUrl,
                data: { searchText: request.term, maxResults: 10, shopId: myVars.shId },
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    /*response($.map(data, function (item) {
                        console.log(data);
                        return {

                            value: item.product_name,
                            avatar: item.pfimage_thumb,
                            rep: item.product_name,
                            selectedId: item.url
                        };
                    }))*/
                }
            })
        },
        select: function (event, ui) {

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

            return false;
        }
    }).autocomplete( "instance" )._renderItem = function (ul, item) {
        console.log('test');
        /*var inner_html = '

Reputation: ' + item.volume + '

' + item.product_name + '

'; return $("
  • ") .data("ui-autocomplete-item", item) .append(inner_html) .appendTo(ul);*/ };

    HTML:

     

    Reputation: ' + item.volume + '

    ' + item.product_name + '
    ') return $("
  • ").append(item).appendTo(ul); }; });

    如果您的数据返回,请传递给它response()以确保manmu得到渲染.你不需要,因为select将被解雇.



    1> Twisty..:

    一些小的修改,你应该在路上:

    示例:https://jsfiddle.net/Twisty/3gm3sfem/

    Javascript的

    $(function() {
      var myData = [{
        product_name: "Name 1",
        pfimage_thumb: "thumb1.jpg",
        url: "url1"
      }, {
        product_name: "Name 2",
        pfimage_thumb: "thumb2.jpg",
        url: "url2"
      }, {
        product_name: "Name 3",
        pfimage_thumb: "thumb3.jpg",
        url: "url3"
      }];
      $('#name-list').autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "/echo/json/",
            data: {
              json: JSON.stringify(myData)
            },
            dataType: "json",
            type: "POST",
            success: function(data) {
              console.log(data);
              response(data);
            }
          })
        },
        select: function(event, ui) {
          alert(ui.item ? ("You picked '" + ui.item.label) : "Nothing selected, input was " + this.value);
          return false;
        }
      }).autocomplete("instance")._renderItem = function(ul, item) {
        console.log('test');
        var item = $('

    Reputation: ' + item.volume + '

    ' + item.product_name + '
    ') return $("
  • ").append(item).appendTo(ul); }; });
  • 如果您的数据返回,请传递给它response()以确保manmu得到渲染.你不需要,因为select将被解雇.


  • 推荐阅读
    • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
    • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
    • Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    • springmvc学习笔记(十):控制器业务方法中通过注解实现封装Javabean接收表单提交的数据
      本文介绍了在springmvc学习笔记系列的第十篇中,控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时,如何将其交给同一个控制器处理。 ... [详细]
    • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
    • Linux重启网络命令实例及关机和重启示例教程
      本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
    • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
    • C# 7.0 新特性:基于Tuple的“多”返回值方法
      本文介绍了C# 7.0中基于Tuple的“多”返回值方法的使用。通过对C# 6.0及更早版本的做法进行回顾,提出了问题:如何使一个方法可返回多个返回值。然后详细介绍了C# 7.0中使用Tuple的写法,并给出了示例代码。最后,总结了该新特性的优点。 ... [详细]
    • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
    • 后台获取视图对应的字符串
      1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
    • 《数据结构》学习笔记3——串匹配算法性能评估
      本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
    • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
    • 猜字母游戏
      猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
    • 在编写业务代码时,常常会遇到复杂的业务逻辑导致代码冗长混乱的情况。为了解决这个问题,可以利用中间件模式来简化代码逻辑。中间件模式可以帮助我们更好地设计架构和代码,提高代码质量。本文介绍了中间件模式的基本概念和用法。 ... [详细]
    • 本文介绍了在wepy中运用小顺序页面受权的计划,包含了用户点击作废后的从新受权计划。 ... [详细]
    author-avatar
    专注自由近_515
    这个家伙很懒,什么也没留下!
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有