当前位置：文江博客话题详情

自动完成代码位置问题

发布于 2024-11-18 00:19:14 字数 273 浏览 1 评论 0原文

我正在使用 ui 自动完成插件，除了代码被插入到“正文”中并且我需要将其位于另一个类下之外，一切都很好。

剪掉愚蠢的编辑器。

我正在使用基本的 jquery ui 自动完成插件 http://jqueryui.com/demos/autocomplete/ 但是它将代码插入到正文的底部。

有什么想法吗？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬シ愛 2024-11-25 00:19:14

很难说清楚你在问什么。
您可以围绕文本框构建 jQuery UI 自动完成功能：

<input id="project" />

基本上，您可以将标签放置在您想要的任何位置。
然后你必须使用 jQuery 创建自动完成：

$("#project").autocomplete();

我已经为你准备了一个 fiddle 。

或者你可以运行这个：

var projects = [{
  value: "jquery",
  label: "jQuery",
  desc: "the write less, do more, JavaScript library",
  icon: "jquery_32x32.png"
}, {
  value: "jquery-ui",
  label: "jQuery UI",
  desc: "the official user interface library for jQuery",
  icon: "jqueryui_32x32.png"
}, {
  value: "sizzlejs",
  label: "Sizzle JS",
  desc: "a pure-JavaScript CSS selector engine",
  icon: "sizzlejs_32x32.png"
}];

$("#project").autocomplete({
  minLength: 0,
  source: projects,
  focus: function(event, ui) {
    $("#project").val(ui.item.label);
    return false;
  },
  select: function(event, ui) {
    alert(ui.item.desc);

    return false;
  }
}).data("autocomplete")._renderItem = function(ul, item) {
  return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
};

#myDiv {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<div id="myDiv">
  <label for="project">projects (j to see results):</label>
  <input id="project" />
</div>

It's hard to tell what you're asking.
You build a jQuery UI autocomplete around a textbox:

<input id="project" />

You can place your tag wherever you want, basically.
and then you have to create the autocomplete with jQuery:

$("#project").autocomplete();

I've prepared a fiddle for you.

Or you can run this:

var projects = [{
  value: "jquery",
  label: "jQuery",
  desc: "the write less, do more, JavaScript library",
  icon: "jquery_32x32.png"
}, {
  value: "jquery-ui",
  label: "jQuery UI",
  desc: "the official user interface library for jQuery",
  icon: "jqueryui_32x32.png"
}, {
  value: "sizzlejs",
  label: "Sizzle JS",
  desc: "a pure-JavaScript CSS selector engine",
  icon: "sizzlejs_32x32.png"
}];

$("#project").autocomplete({
  minLength: 0,
  source: projects,
  focus: function(event, ui) {
    $("#project").val(ui.item.label);
    return false;
  },
  select: function(event, ui) {
    alert(ui.item.desc);

    return false;
  }
}).data("autocomplete")._renderItem = function(ul, item) {
  return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
};

#myDiv {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<div id="myDiv">
  <label for="project">projects (j to see results):</label>
  <input id="project" />
</div>

回复收藏 0 原文

~没有更多了~