草庐IT

javascript - jQuery 自动完成渲染项目未执行

coder 2024-07-15 原文

我在同一个 HTML 上有两个使用相同自动完成功能的文本框(输入类型文本)。第一个文本框工作正常，但第二个文本框不呈现结果。它与服务器通信，我得到了结果，但甚至没有调用渲染函数。输入之间的唯一区别是，一个位于开始隐藏的 div 中，我通过设置高 z 顺序并屏蔽 HTML 来显示类似于对话框窗口。

这是第二个输入框所在的 div 的 CSS。

   .windowBooking  {
      position:absolute;
      width:450px;
     /* height:200px; */
      display:none;
      z-index:9999;
      padding:20px;
    }

自动完成功能:

$(".makeClass").autocomplete({
    source: function (request, response) {
        $('#Code').val(); //clear code value
        $.ajax({
            url: "myUrl",
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: 'json', //What kind of Result is expected. (Ex json, xml, etc)
            data: "{'searchItem':'" + request.term + "'}",
            success: function (data) {
                var item = [];
                var len = data.d.length;
                for (var i = 0; i < len; i++) {
                    var obj = { name: data.d[i].MakeReport, code: data.d[i].MakeCode };
                    item.push(obj);
                }
                response(item);
            }
        })
    },
    focus: function (event, ui) {
        $(this).val(ui.item.name);
        return false;
    },
    select: function (event, ui) {
        $('#Code').val(ui.item.code);
        $('#Name').val(ui.item.name);
        $(this).val(ui.item.name);
        return false;
    },
    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    },
    minLength: 2,
    delay: 250
}).data("autocomplete")._renderItem = function (ul, item) {
    var temp = item.name;
    return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.name + "</a>")
                .appendTo(ul);
};

输入框使用相同的类来调用自动完成。

  <input id="OtherMake" type="text" maxlength="30" size="20" class="makeClass"/> <!-- It works -->

  <div id="dialogPlus" class="windowBooking">
                                     :
    <input  type="text" id="MakeName"  class="makeClass" /> <!-- doesn't work.-->
                                     :
 </div>

任何想法，为什么在一个输入框上渲染而在另一个输入框中不渲染？让我说清楚，在第二个输入框上，唯一不起作用的是 renderItem 函数，由于某种原因它没有被执行。在屏幕上，您可以看到很多未定义的值，但如果您选择任何未定义的值，输入框就会填充正确的值。

最佳答案

我在类选择器上应用 _renderItem() 时遇到了类似的问题，但用

解决了它 
$.each($( ".makeClass" ), function(index, item) {
        $(item).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.value + " - " + item.label + "</a>")
                .appendTo(ul);
        };
          });

关于javascript - jQuery 自动完成渲染项目未执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7205699/

javascriptjQuery34itemfunctionautocomplete

有关javascript - jQuery 自动完成渲染项目未执行的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  7. ruby - Chef 执行非顺序配方 - 2

    我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul

  8. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  9. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  10. ruby - 为什么 Ruby 的 each 迭代器先执行？ - 2

    我在用Ruby执行简单任务时遇到了一件奇怪的事情。我只想用每个方法迭代字母表，但迭代在执行中先进行:alfawit=("a".."z")puts"That'sanalphabet:\n\n#{alfawit.each{|litera|putslitera}}"这段代码的结果是:(缩写)abc⋮xyzThat'sanalphabet:a..z知道为什么它会这样工作或者我做错了什么吗？提前致谢。 最佳答案 因为您的each调用被插入到在固定字符串之前执行的字符串文字中。此外，each返回一个Enumerable，实际上您甚至打印它。试试

随机推荐