重新定位 Jquery UI 自动完成结果框

Re-positioning Jquery UI Autocomplete Results Box(重新定位 Jquery UI 自动完成结果框)
本文介绍了重新定位 Jquery UI 自动完成结果框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我正在使用 Jquery UI 自动完成插件作为直接搜索词建议工具.除了我无法移动结果框外,它已启动并运行,没有任何问题.我基本上需要将它向左移动 20 像素,向下移动 4 像素.我试图覆盖 Jquery UI CSS,但无法重新定位框.

I am using the Jquery UI Autocomplete plugin for a straight forward search term suggestion tool. It is up and running with no problems except that I cannot move the results box. I basically need to move it 20 pixels to the left and 4 pixels down. I have attempted to overwrite the Jquery UI CSS, but have not been able to reposition the box.

非常感谢有此问题经验的人提供任何帮助.

Any help from someone experienced with this issue would be greatly appreciated.

推荐答案

这里有一种方法可以做到这一点,点击 open 事件并在该事件发生时更改菜单的位置:

Here's one way you could do it, tapping into the open event and changing the position of the menu when that event occurs:

$("#autocomplete").autocomplete({
    appendTo: "#results",
    open: function() {
        var position = $("#results").position(),
            left = position.left, top = position.top;

        $("#results > ul").css({left: left + 20 + "px",
                                top: top + 4 + "px" });

    }
});

我还使用 appendTo 选项来轻松查找包含菜单的 ul.不过,您可以在没有此选项的情况下执行此操作.

I'm also using the appendTo option to make finding the ul that contains the menu easily. You could do it without this option though.

这是一个工作示例:http://jsfiddle.net/9QmPr/

这篇关于重新定位 Jquery UI 自动完成结果框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href
ExecJS::ProgramError: SyntaxError: Reserved word quot;functionquot;(ExecJS::ProgramError: SyntaxError: 保留字“function)
Infinite scroll and will_paginate appending the #39;next page#39; of items multiple times(无限滚动和 will_paginate 多次附加项目的“下一页)
What is cleanest way to turn Array of JQuery Promises into a JQuery Promise of an Array?(将 JQuery Promise 数组转换为数组的 JQuery Promise 的最简洁方法是什么?)
Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)
How to onclick-trigger a non-native jQuery plugin#39;s action?(如何点击触发非本地 jQuery 插件的操作?)