如何扩展Django形式的ChoiceField以也接受文本并搜索紧密匹配项，以避免不得不在长列表中找到某些内容

Question

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

我想保留下拉列表供用户浏览，但也希望他们能够以自由文本的形式在字段中键入内容，并在输入内容上进行部分匹配，并将列表过滤为与用户相似的项目输入。

其中一些条目很长，只有几个字，例如。理想情况下，当用户输入“ Cleve”以及其他任何紧密匹配项时，“ Middlesbrough South and East Cleveland”将出现在列表中。

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不可能接近在单个控件中组合选择输入和文本输入。我认为，在选择输入上方的文本输入与适当的Java脚本事件的组合足以使选择与用户在文本输入中键入的内容保持足够的同步。

事件侦听器的响应如下：-

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

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

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

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

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