在一个页面上的多个jQuery自动完成实例

问题描述：

我想在每个页面上以不同方式为jQuery的自动完成插件的每个实例进行样式设置。除了我无法弄清楚如何为每个实例设置不同的样式。我似乎无法将ac_ *样式封装在div中，以便从CSS中识别它们。我所做的每一个改变都会影响到两者有任何想法吗？在一个页面上的多个jQuery自动完成实例

谢谢。

答

我想你会发现，你的问题是自动完成的下拉列表下不放置你的占位符......例子里面：

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</div>

当结果回来时，一个新的div被添加到页面以显示结果 - 但不在“differentStyle”分区中。它只是被添加到DOM的末尾。例如：

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</div> 

... 
<div class="ac_results">I get added by jQuery Autocomplete!</div> 
</body>

阅读该文档，我要说的是，它将使覆盖风格两个自动完成框在同一页上不可能：

http://docs.jquery.com/Plugins/Autocomplete

感谢您的研究。是的，这很令人沮丧。或许有另一种解决方案来做到这一点？谢谢。 – ensnare 2010-01-28 08:52:17

答

正在寻找别的东西当我碰到这个帖子时... 我设法做到这一点，通过捕获下面的自动完成事件，并添加我自己的类到外部的自动完成输出。然后根据需要使用CSS来格式化元素。希望这有助于某人。

$input.autocomplete({ 
      focus : function(event, ui) { 
       $(".forms-search-result").parents("ul").addClass("myClass"); 
       return false; 
      }, 
      open : function(event, ui) { 
       $(".forms-search-result").parents("ul").addClass("myClass"); 
      },

实施例的CSS：

.myClass a.ui-corner-all { font-weight:bold; }

同样如我的JSON结果部分，我简单回传（从我的JAVA AJAX动作）的HTML壳内嵌有作为实际部分的结果JSON“结果”。这样我可以在每个结果周围创建详细的HTML，然后使用上面的方法按照我想要的方式对它们进行格式化。

答

http://api.jqueryui.com/autocomplete/#method-widget

添加如下内容：

selector.autocomplete("widget").addClass('yourclass');

这是正确的链接：http://api.jqueryui.com/autocomplete/#method-widget – stofl 2012-11-27 16:59:06

答

您可以重写_renderMenu方法。以http://jqueryui.com/demos/autocomplete/#combobox为例。

selector.data("autocomplete")._renderMenu=function(ul, items){ 
//do something here.. 
}

答

我刚刚发现，如果您使用jQuery UI 1.8，您可以轻松获取UL容器。抢UI容器1.8，您只需添加以下到您的开启方式：

var $myAcInput = $("#my-acomplete-input"); 

... 
$myAcInput.autocomplete({ 
    open : function(event, ui) { 
    // Grab the widget that just opened: 
    var $resultsContainer = $formsInput.autocomplete("widget"); 
    // Add a custom rendering class and use tht to style your subelements 
    $resultsContainer.addClass("my-custom-results-container-class");    
    // Position the container wherever you want: 
    $resultsContainer.position({at: "center bottom", 
           my:"center top", 
           collision: "fit", 
           of: "#my-acomplete-input"});    
    } 
    source : etc etc etc 
});

答

解决方案很简单：

$("#target-input").autocomplete({ 
    open:function(event, ui) { 
     $('.ui-autocomplete.ui-menu').addClass('yourClass'); 
    }, 
    close:function(event, ui) { 
     $('.ui-autocomplete.ui-menu').removeClass('yourClass'); 
    } 
});

你可以把任何代码类.yourClass

这不起作用，它会将该类添加到页面上的所有自动完成菜单。 – 2012-08-02 01:12:12

答

使用appendTo选项可将自动填充列表放置在某个自定义容器中，而不是body。然后你可以设计它。例如：

JS：

$('#suggestions').autocomplete({source: get_suggestions, appendTo: '#my-suggestions'})

HTML：

<input type="text" id="suggestions"> 
<div id="my-suggestions"></div>

CSS：

#my-suggestions { 
    position: absolute; 
} 

#my-suggestions .ui-autocomplete { 
    foo: bar; 
}

这是唯一可用的解决方案，允许您使用不同的css样式不同的自动填充。其余这些答复将影响所有这些。 – 2012-08-02 01:17:10

完美的解决方案 – karancan 2012-08-16 19:21:25

答

在较新版本 “appendTo” 加入，让您选择一个父元素建议列表。您可以为您的列表创建不同的父母（带有in或class）。

答

当我遇到这个问题时，我发现，jquery-ui为每个实例提供了一个唯一的id，即＃ui-id-1，＃ui-id-2，其中dom中的第一个自动完成获取数字1 ，第二个数字2等等。因此，如果已知自动完成的顺序，则可以将不同的样式应用于不同的ID。

在一个页面上的多个jQuery自动完成实例

相关推荐