如果您想了解jquery–使用django-autocomplete-light自动完成的相关知识，那么本文是一篇不可错过的文章，我们将为您提供关于City'对象在django-autocomplet
如果您想了解jquery – 使用django-autocomplete-light自动完成的相关知识，那么本文是一篇不可错过的文章，我们将为您提供关于City'对象在django-autocomplete-light中没有属性'region__name'、Django 表单：django-autocomplete-light 显示空下拉列表、django-autocomplete-light 模板不呈现自动完成小部件、jQuery autocomplate 自扩展插件、自动完成示例代码的有价值的信息。
本文目录一览：- jquery – 使用django-autocomplete-light自动完成
- City'对象在django-autocomplete-light中没有属性'region__name'
- Django 表单：django-autocomplete-light 显示空下拉列表
- django-autocomplete-light 模板不呈现自动完成小部件
- jQuery autocomplate 自扩展插件、自动完成示例代码
jquery – 使用django-autocomplete-light自动完成
我正在Django开发一个项目,我想在我的搜索中自动填充,但是我已经失去了
Django-autocomplete-light’s 的代码
它不起作用.
它不起作用.
首先我安装它：
pip install django-autocomplete-light
在我输入INSTALLED_APPS和url之后：
INSTALLED_APPS = (
#...
'django.contrib.staticfiles','autocomplete_light'
)
# URLS
url(r'^autocomplete/',include('autocomplete_light.urls')),
但是我在这里失去了我.
这是我的模特：
class Tecnico(models.Model):
codigo = models.AutoField(primary_key=True)
nome = models.CharField(max_length=60)
endereco = models.CharField(max_length=60,blank=True,null=True)
numero = models.CharField(max_length=10,null=True)
bairro = models.CharField(max_length=40,null=True)
cidade = models.IntegerField(blank=True,null=True)
fone = models.CharField(max_length=14,null=True)
cpf = models.CharField(max_length=18,null=True)
sexo = models.CharField(max_length=1,null=True)
data_nasc = models.DateField(blank=True,null=True)
data_inc = models.DateField(auto_Now_add=True,null=True)
status = models.CharField(max_length=1,null=True)
class Meta:
db_table = 'tecnico'
这是我的HTML代码：
<div>
<form action="">
<div>
<divhttps://www.jb51.cc/tag/irs/" target="_blank">irst">
<labelfor="nome">Nome</label>
<inputtype="text" autofocus>
<ul>
{# Show my list here #}
</ul>
</div>
<div>
<inputid="action-button" type="button" value="Pesquisar">
</div>
</div>
</form>
</div>
<div>
<table>
<thead>
<tr>
<th>Código</th>
<th>Nome</th>
<th>Telefone</th>
<th>CPF</th>
<th>Data de nasc.</th>
</tr>
</thead>
{% for Tecnico in tecnicos %}
<tbody>
<tr>
<td>{{Tecnico.codigo}}</td>
<td>{{Tecnico.nome}}</td>
<td>{{Tecnico.fone}}</td>
<td>{{Tecnico.cpf}}</td>
<td>{{Tecnico.data_nasc}}</td>
</tr>
</tbody>
{% empty %}
<div>
Nenhum resultado foi enconTrado
</div>
{% endfor %}
</table>
</div>
<div>
<divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom">
<ahref="/tecnicos-incluir/">Incluir novo</a>
</div>
</div>
我想在我的HTML中显示列表.
对不起扩展代码.
在搜索中我将自动完成灯用于工作的地方？
解决方法
这是创建导航自动完成的文档：
http://django-autocomplete-light.readthedocs.io/en/2.3.0/navigation.html
它在本网站的搜索表单中使用：http://societecitoyenne.org/
City'对象在django-autocomplete-light中没有属性'region__name'
如何解决City''对象在django-autocomplete-light中没有属性''region__name''？
我有一个可搜索的下拉菜单，可以直接从表（模型）中获取数据。
这是城市表：
，如您所见，它也在尝试联接country和region表。
鉴于我有这个：
class LocationAutocomplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
if not self.request.user.is_authenticated:
return City.objects.none()
qs = City.objects.all().select_related(''country'',''region'')
if self.q:
qs = qs.select_related(''country'',''region'').filter(name__icontains=self.q)
return qs
def get_result_label(self,item):
return format_html(''<b>{}</b>-{}-{}'',item.name,item.region__name,item.country__name)
上面的item.name返回城市表中的所有名称，但是未定义region__name或item.country__name。对我来说，这意味着select_related不会像SQL查询那样加入他们。
基于select_related的定义：
在执行查询时选择所有相关数据（多对多除外） 关系）
但是我收到此错误（这意味着没有在最后选择region__name！）：
''City'' object has no attribute ''region__name''
在shell中，我只是按如下方式尝试使用values()：
qs = City.objects.all().select_related(''country'',''region'').values(''id'',''name'',''country__name'',''region__name'')
它返回一个字典列表，其中包含values()中所有提及的属性，但是替换时出现错误：
AttributeError: ''dict'' object has no attribute ''pk''
解决方法
访问区域名称时，您要写下划线而不是点来表示关系。 只需通过以下方式更改行：
def get_result_label(self,item):
return format_html(''<b>{}</b>-{}-{}'',item.name,item.region.name,item.country.name)
Django 表单：django-autocomplete-light 显示空下拉列表
我应该早点检查javascript控制台！问题是 jQuery 的 脚本之一无效。一旦我解决了这个问题，自动完成字段就起作用了
django-autocomplete-light 模板不呈现自动完成小部件
如何解决django-autocomplete-light 模板不呈现自动完成小部件？
我正在尝试在我的主页上创建一个搜索字段，您可以在其中按标签搜索条目，并且在该搜索字段中，当您输入字母时，它应该会向您建议包含您目前输入的内容的标签。我正在使用 django-taggit 作为标签。 我遵循了本教程： https://django-autocomplete-light.readthedocs.io/en/master/taggit.html 它支持 django-taggit。
模板
<div>
<form method="post">
{% csrf_token %}
{% for field in form %}
{{ field.label_tag }}
{{ field }}
{% endfor %}
<button type="submit">Search</button>
</form>
</div>
urls.py
# AUTOCOMPLETE URL
url(r''^tag-autocomplete/$'',views.TagAutocomplete.as_view(),name=''tag-autocomplete''),forms.py
class SearchForm(autocomplete.FutureModelForm):
class Meta:
model = Intrare
fields = (''tags'',)
widgets = {
''tags'': autocomplete.TaggitSelect2(''intrari:tag-autocomplete'')
}
models.py
class Intrare(models.Model):
tags = TaggableManager()
def __str__(self):
return self.titlu
views.py
class TagAutocomplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
intrari = [intrare.tags for intrare in Intrare.objects.filter(public=True)]
tags = reduce(lambda x,y: x | y,[tags.get_queryset() for tags in intrari])
tags = [tag.name for tag in tags]
qs = Tag.objects.filter(name__in=tags)
if self.q:
qs = qs.filter(name__contains=self.q)
return qs
Here is the result. The widget does not show properly
解决方法
我发现了错误，我忘记在模板中添加{{ form.media }}。
<div>
{{ form.media }}
<form method="post">
{% csrf_token %}
{% for field in form %}
{{ field.label_tag }}
{{ field }}
{% endfor %}
<button type="submit">Search</button>
</form>
</div>
jQuery autocomplate 自扩展插件、自动完成示例代码
不过做了浏览器方面的兼容，经测试兼容IE6+、Firefox3.5+
首先看看autocomplate.js:
;(function ($) {
var index = -1;
var timeId;
var cssOptions = {
"border": "1px solid black",
"background-color": "white",
"position": "absolute"/*,
"font": "normal normal lighter 14px 6px Times New Roman"*/
};
var defaults = {
width: "auto",
highlightColor: "#3399FE",
unhighlightColor: "#FFFFFF",
css: cssOptions,
dataType: "xml",
paramName: "word",
delay: 500,
max: 20
};
var keys = {
UP: 38,
DOWN: 40,
DEL: 46,
TAB: 9,
ENTER: 13,
ESC: 27,
/*COMMA: 188,*/
PAGEUP: 33,
PAGEDOWN: 34,
BACKSPACE: 8,
A: 65,
Z: 90
};
$.fn.extend({
autocomplete: function (sUrl,settings) {
sUrl = (typeof sUrl === "string") ? sUrl : "";
var param = !this.attr("id") ? defaults.paramName : this.attr("id");
settings = $.extend({},defaults,{url: sUrl,paramName: param},settings);
var autoTip = this.autoTipTemplate(this,settings);
$("body").append(autoTip);
var $this = this;
this.keyup(function (event) {
$this.keyOperator(event,autoTip,settings);
});
/*$("input[type=button]").click(function () {
$("#result").text("文本框中的【" + search.val() + "】被提交了！");
$("#auto").hide();
index = - 1;
});*/
return this.each(function () {
$this.val();
});
},
autoTipTemplate: function (input,settings) {
var inputOffset = input.offset();
var autoTip = $("<div/>").css(settings.css).hide()
.css("top",inputOffset.top + input.height() + 5 + "px")
.css("left",inputOffset.left + "px");
var space = $.browser.mozilla ? 2 : 6;//兼容浏览器
var tipwidth = (typeof settings.width === "string" && "auto") ? input.width() : settings.width;
autoTip.width(tipwidth + space + "px");
return autoTip;
},
select: function (target,index,settings,flag) {
var color = flag ? settings.highlightColor : settings.unhighlightColor;
target.children("div").eq(index).css("background-color",color);
},
keyOperator: function (event,settings) {
var evt = event || window.event;
var autoNodes = autoTip.children("div");
var kc = evt.keyCode;
var $this = this;
/* 当用户按下字母或是delete 或是退格键*/
if (kc >= keys.A && kc <= keys.Z || kc == keys.BACKSPACE || kc == keys.DEL) {
var wordText = this.val();
if (wordText.length != 0) {
var param = {};
param[settings.paramName] = wordText;
clearTimeout(timeId);
timeId = setTimeout(function () {
$.post(settings.url,param,function (data) {
var wordobj = $(data);
if (settings.dataType == "xml") {
var wordNodes = wordobj.find("word");
autoTip.html("");
wordNodes.each(function (i) {
var divNode = $("<div>").attr("id",i);
//将遍历的单词加入到创建的div中，然后把该div追加到auto中
divNode.html($(this).text()).appendTo(autoTip);
//鼠标已进去，添加高亮
divNode.mousemove(function () {
//如果已经存在高亮，去掉高亮改为白色
if (index != -1) {
autoTip.children("div").eq(index).css("background-color",settings.unhighlightColor);
}
index = $(this).attr("id");
$(this).css("background-color",settings.highlightColor);
});
//鼠标移出,取消高亮
divNode.mouSEOut(function () {
$(this).css("background-color",settings.unhighlightColor);
});
//点击高亮内容
divNode.click(function () {
$this.val($(this).text());
index = -1;
autoTip.hide();
});
});
if (wordNodes.length > 0) {
autoTip.show();
} else {
autoTip.hide();
index = -1;
}
}
});
},settings.delay);
} else {
autoTip.hide();
index = -1;
}
} else if (kc == keys.UP || kc == keys.DOWN) {/*当用户按下上下键*/
if (kc == keys.UP) {//向上
if (index != -1) {
autoNodes.eq(index).css("background-color",settings.unhighlightColor);
index--;
} else {
index = autoNodes.length - 1;
}
if (index == -1) {
index = autoNodes.length - 1;
}
autoNodes.eq(index).css("background-color",settings.highlightColor);
} else {//向下
if (index != -1) {
autoNodes.eq(index).css("background-color",settings.unhighlightColor);
}
index++;
if (index == autoNodes.length) {
index = 0;
}
autoNodes.eq(index).css("background-color",settings.highlightColor);
}
} else if (kc == keys.PAGEUP || kc == keys.PAGEDOWN) {
event.preventDefault();
if (kc == keys.PAGEUP) {
if (index != -1) {
autoNodes.eq(index).css("background-color",settings.unhighlightColor);
}
if (autoNodes.length > 0) {
index = 0;
autoNodes.eq(0).css("background-color",settings.highlightColor);
}
} else {
if (index != -1) {
autoNodes.eq(index).css("background-color",settings.unhighlightColor);
}
index = autoNodes.length - 1;
autoNodes.eq(index).css("background-color",settings.highlightColor);
}
} else if (kc == keys.ENTER) {
//回车键
//有高亮内容就补全信息
if (index != -1) {
$this.val(autoNodes.eq(index).text());
} else {//没有就隐藏
$("body").append($("<div/>").text("文本框中的【" + $this.val() + "】被提交了！"));
$this.get(0).blur();
}
autoTip.hide();
index = -1;
} else if (kc == keys.ESC) {
autoTip.hide();
}
}
});
})(jQuery);
现在来分析上面的autocomplate插件的一些常用选项：
index就是选择提示选项高亮的索引；
timeId是当用户在文本域输入时，利用setTimeout进行ajax请求服务器获得数据的而返回的时间；
cssOptions是自动提示选项的样式，这里给出了一些默认的样式；
var defaults = {
width: "auto",//默认或自动设置宽度
highlightColor: "#3399FE",//高亮时的颜色
unhighlightColor: "#FFFFFF",//非高亮时的颜色
css: cssOptions,//ajax请求返回数据类型
paramName: "word",//ajax请求的参数名称，如果你有设置文本域的id，那么就使用这个属性
delay: 500,//当文本域在不停的输入时，ajax多久请求一次服务器
};
