如何扩展 Django 表单 ChoiceField 以也接受文本并搜索接近的匹配项以避免必须在长列表中查找内容

Question

我想提高我拥有的表单的可用性，该表单允许用户 select 可以在地图上突出显示的区域。

我想保留下拉列表供用户浏览，但也让他们能够在字段中输入自由文本并对他们的输入进行部分匹配并将列表过滤为项目类似于他们的输入。

有些条目很长，只有几个字，例如。理想情况下 "Middlesbrough South and East Cleveland" 会出现在列表中，因为用户输入 "Cleve" 以及任何其他接近的匹配项。

The page looks like this at the moment

我有一个简单的 Django 表单：-

class ConstituencyForm(forms.Form):
    description = "Use the dropdown to select an area:-"
    lstRandom = [(0, 'Random')]  
    lstChoices = lstRandom + list(constituency.objects.values_list('id', 'name'))
    ConstituencySelection = forms.ChoiceField(choices=lstChoices, widget=forms.Select(),required=False, label="")

表单被实例化并传入视图中的这个摘录：-

    frmCons=ConstituencyForm()
    if not request.GET.get("ConstituencySelection") or int(request.GET.get("ConstituencySelection"))==0:
        intConsId = random_cons_view()
        strConsType = "random"
    else:
        intConsId = int(request.GET.get("ConstituencySelection"))
        strConsType = "selected"
    objCons=get_constituency_view(intConsId)

    context={
        "consform" : frmCons,
        "consgeom" : json.loads(objCons[1]),

它出现在模板中：-

    <form method='get' action=''>
        Select an area:-<br>
        {{ context.consform }}<br><br>
        Select a maptile:-<br>
        {{ context.tileform }}<br><br>
        <input type="submit" value="Update" >
    </form>

我正在尽我所能进行研究，但正在努力拼凑如何进行此更改。

类似于：-
- 将表单字段类型更改为接受选择和自由文本的类型（如 MS 中的组合字段访问）
- 在视图中使用带 "title__contains" 的过滤器？我还能保留表单对象中的所有选择吗？
- 使用 JavaScript 识别字段中的按键事件并刷新列表？我对 JS 一点都不熟练，但想试一试。

我需要采取哪些步骤以及如何编码？

你能帮我实现这个目标吗？非常感谢一个伟大的社区，

菲尔

Answer 1

在学习了 JS 课程之后，我终于成功了。

最终，仅 html 无法将 select 输入与单个控件中的文本输入相结合。在我看来，将 select 输入正上方的文本输入与适当的 java 脚本事件相结合以使 select 与用户在文本输入中键入的内容同步就足够了。

事件监听器响应如下：-

在文本输入键上（用户正在键入以查找部分匹配项）- 遍历 select 选项数组并将 hidden 设置为 true 或 false 随着输入字符串的发展逐渐使用 a 过滤列表不区分大小写包括每个选项标签上的方法。 select 输入的大小属性也是动态的，根据剩余的选项显示 1 到最多 5 个选项。

在 select 输入更改或单击（用户 select 选项）时，将使用 selected 选项的值设置单独的只读文本输入，并且用户可以单击相应的按钮来查找该选项的数据。

单击清除按钮时：数组中的选项将其隐藏属性重置为 false。

我添加了一些其他位来改进功能 - 例如，使用正则表达式将带有标点符号的输入分成多个部分匹配并查找两者，但这是用例的上下文。

该代码非常冗长和琐碎，因此我尝试在假设适当的 JS 知识的情况下根据上下文解释此解决方案。如果有人有他们想要支持的特定用例，我很乐意提供更多详细信息。

如何扩展 Django 表单 ChoiceField 以也接受文本并搜索接近的匹配项以避免必须在长列表中查找内容

How to extend a Django forms ChoiceField to also accept text and search for close matches to avoid having to find something in a long list

javascript

filter

django-forms

choicefield

dropdown