Amaze UI 3.0 建议反馈帖

最愛大表哥 回复了问题 • 35 人关注 • 52 个回复 • 8422 次浏览 • 6 天前 • 来自相关话题

Amaze UI Touch比web版好像更加的适用于手机版,但是怎么使用呢?求教

roc 回复了问题 • 2 人关注 • 1 个回复 • 82 次浏览 • 1 天前 • 来自相关话题

用Dropdown控件实现简单的Autocomplete

roc 发表了文章 • 0 个评论 • 25 次浏览 • 1 天前 • 来自相关话题

插件库中有个Autocomplete组件,但不支持ajax动态查询,样式也简单了点,于时自己动手实现了一个,只是简单实现了,不支持上下光标键选择,有兴趣的可以自己扩展一下。HTML:就是用样式为am-dropdown的div包住input,在input下面放一个ul,ul里可以给个默认的li也可以不用 插件库中有个Autocomplete组件,但不支持ajax动态查询,样式也简单了点,于时自己动手实现了一个,只是简单实现了,不支持上下光标键选择,有兴趣的可以自己扩展一下。HTML:就是用样式为am-dropdown的div包住input,在input下面放一个ul,ul里可以给个默认的li也可以不用<div class="am-dropdown searchContact"> <input class="am-form-field" type="text" placeholder="Contact" name="contact" required> <ul class="am-dropdown-content"> <li class="am-dropdown-header">Autocomplete by Name/Email</li> </ul> </div>JS$(function () { //autocomplete //当input组件获取焦点,弹出Dropdown组件,并触发input的keyup事件动态更新dropdown list的内容 $('input[name="contact"]').focus(function () { $(this).parent().dropdown('open'); $(this).trigger("keyup"); }); //input组件按键事件,动态更新dropdown list的内容 $('input[name="contact"]').keyup(function () { var $dropdown = $(this).parent(), data = $dropdown.data('amui.dropdown'); //如果Dropdown组件未弹出,强制弹出 if (!data.active) { $dropdown.dropdown('open'); } //ajax后台根据用户的输入内容取list的内容,并更新到dropdown list $.ajax({ type: "POST", url: "searchContact", data: { key : $(this).val() }, success: function (data) { //ajax返回的格式,请根据你自己的喜好定义 //{success: true, users: [{EMail: "", NameDisplay: ""},{EMail: "", NameDisplay: ""}] if (data.success) { $(".am-dropdown-content").html("<li class='am-dropdown-header'>Autocomplete by Name/Email</li>"); $.each(data.users, function (index, value) { $(".am-dropdown-content").append("<li email='" + value.EMail.trim() + "'><a href='#'>" + value.NameDisplay.trim() + "</a></li>"); }); } } }); }); //点击dropdown list的item,将内容放到input中,并关闭Dropdown $(document).on("click", '.am-dropdown-content li a', function () { //console.log("li click", $(this).parent().attr("email")); $(this).parent().parent().parent().find('input').val($(this).parent().attr("email")); $(this).parent().parent().parent().dropdown('close'); }); }); 
[ 查看全部 ]
<p>插件库中有个Autocomplete组件,但不支持ajax动态查询,样式也简单了点,于时自己动手实现了一个,只是简单实现了,不支持上下光标键选择,有兴趣的可以自己扩展一下。</p><p>HTML:就是用样式为am-dropdown的div包住input,在input下面放一个ul,ul里可以给个默认的li也可以不用</p><pre><code class="language-html">&lt;div class="am-dropdown searchContact"&gt;
&lt;input class="am-form-field" type="text" placeholder="Contact" name="contact" required&gt;
&lt;ul class="am-dropdown-content"&gt;
&lt;li class="am-dropdown-header"&gt;Autocomplete by Name/Email&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</code></pre><p>JS</p><pre><code class="language-javascript">$(function () {
//autocomplete
//当input组件获取焦点,弹出Dropdown组件,并触发input的keyup事件动态更新dropdown list的内容
$('input[name="contact"]').focus(function () {
$(this).parent().dropdown('open');
$(this).trigger("keyup");
});
//input组件按键事件,动态更新dropdown list的内容
$('input[name="contact"]').keyup(function () {
var $dropdown = $(this).parent(),
data = $dropdown.data('amui.dropdown');
//如果Dropdown组件未弹出,强制弹出
if (!data.active) {
$dropdown.dropdown('open');
}
//ajax后台根据用户的输入内容取list的内容,并更新到dropdown list
$.ajax({
type: "POST",
url: "searchContact",
data: { key : $(this).val() },
success: function (data) {
//ajax返回的格式,请根据你自己的喜好定义
//{success: true, users: [{EMail: "", NameDisplay: ""},{EMail: "", NameDisplay: ""}]
if (data.success) {
$(".am-dropdown-content").html("&lt;li class='am-dropdown-header'&gt;Autocomplete by Name/Email&lt;/li&gt;");
$.each(data.users, function (index, value) {
$(".am-dropdown-content").append("&lt;li email='" + value.EMail.trim() + "'&gt;&lt;a href='#'&gt;" + value.NameDisplay.trim() + "&lt;/a&gt;&lt;/li&gt;");
});
}
}
});
});
//点击dropdown list的item,将内容放到input中,并关闭Dropdown
$(document).on("click", '.am-dropdown-content li a', function () {
//console.log("li click", $(this).parent().attr("email"));
$(this).parent().parent().parent().find('input').val($(this).parent().attr("email"));
$(this).parent().parent().parent().dropdown('close');
});
});</code></pre><p>&nbsp;</p>

轮播图 闪一下

Jesse建筑工 回复了问题 • 4 人关注 • 3 个回复 • 419 次浏览 • 4 天前 • 来自相关话题

gallery图片画廊 在IOS中 怎么下载图片??

回复

tidows 发起了问题 • 1 人关注 • 0 个回复 • 24 次浏览 • 4 天前 • 来自相关话题

有没有一些内置的背景色?

回复

妹了个子 发起了问题 • 1 人关注 • 0 个回复 • 38 次浏览 • 5 天前 • 来自相关话题

model的遮罩背景取消时,单击非对话框区域,出现错误

回复

勿念 回复了问题 • 1 人关注 • 2 个回复 • 55 次浏览 • 5 天前 • 来自相关话题

js插件datepicker没用

回复

qqqqqqqq 回复了问题 • 1 人关注 • 2 个回复 • 45 次浏览 • 6 天前 • 来自相关话题

react不适应,妹子UI可否出一个Vue.js版本?

dxhack 回复了问题 • 6 人关注 • 5 个回复 • 3604 次浏览 • 6 天前 • 来自相关话题

下载实例中的widget.html怎么无法显示

回复

sucifer 回复了问题 • 1 人关注 • 1 个回复 • 38 次浏览 • 2017-09-18 21:18 • 来自相关话题

日期控件BUG、手动清空内容后无法再挑选显示

qweqwewqewq 回复了问题 • 5 人关注 • 7 个回复 • 765 次浏览 • 2017-09-18 16:09 • 来自相关话题

怎么联系开发人员,比如商城模板作者

回复

xuchengpu 发起了问题 • 1 人关注 • 0 个回复 • 61 次浏览 • 2017-09-18 12:52 • 来自相关话题