From 24bcc589b4d29b977787fea448fc0c8cede3f419 Mon Sep 17 00:00:00 2001
From: Bob <1397910458@qq.com>
Date: Tue, 13 Oct 2020 14:46:15 +0800
Subject: [PATCH] #zhuce

---
 dashboard/templates/dashboard/register.html   | 96 +++++++++++++++----
 .../dashboard/results_by_keywords.html        | 24 +++++
 dashboard/urls.py                             |  2 +-
 dashboard/views.py                            | 41 ++++----
 4 files changed, 125 insertions(+), 38 deletions(-)
 create mode 100644 dashboard/templates/dashboard/results_by_keywords.html

diff --git a/dashboard/templates/dashboard/register.html b/dashboard/templates/dashboard/register.html
index 8610b58..1704a74 100644
--- a/dashboard/templates/dashboard/register.html
+++ b/dashboard/templates/dashboard/register.html
@@ -69,10 +69,26 @@
                 {#                    </label>#}
                 {#                </p>#}
                 <p style="display: inline-block">
-                    <label for="name">单位<br/>
-                        <input type="text" id="search-text" name="organization">
-                <p><span id='search-result'></span></p>
-                </label>
+                <div class="input-group main-search">
+                    <input type="text" class="form-control" placeholder="请输入关键字"
+                           style="height: 40px;width: 230px;opacity: 1 " name="organization">
+                    <div class="input-group-btn" style="display: none">
+                        <button class="btn btn-default" type="button">
+                            <span class="glyphicon glyphicon-search"></span>
+                        </button>
+                    </div>
+                </div>
+                <div class="autocomplete-panel" style="margin-left: 50px;z-index: 999">
+                </div>
+                {#                <div class="result-panel">#}
+                {#                    <div class="panel panel-default">#}
+                {#                        <div style="padding: 10px; text-align: center">loading...</div>#}
+                {#                        <div style="color: black;z-index: 9999">#}
+                {#                            <p id="point_lat">{{ points.point_lat }}</p>#}
+                {#                            <p id="point_lon">{{ points.point_lon }}</p>#}
+                {#                        </div>#}
+                {#                    </div>#}
+                {#                </div>#}
                 </p>
                 <a href="{% url 'organization-management-create' %}"><span class="glyphicon glyphicon-plus"
                                                                            aria-hidden="true"
@@ -192,23 +208,65 @@
                 });
 
             });
-            $("#search-text").keyup(function () {
-                var q = $("#search-text").val();
-                $.getJSON("/get/organization/", {'q': q}, function (data) {
-                    console.log(data[0].name)
-                    for (var i = 0; i < data.length; i++) {
-                        $('#search-result').append(data[i].name + '<br/>')
-                    }
-                    ;
-                })
+            $('.main-search input').focus(function (e) {
+                e.preventDefault();
+                $("#history_query").hide()
+                var width = $(this).width();
+                var position = $(this).position();
+                var val = $(this).val();
+                var params = {keyword: val}
+                if (val) {
+                    $('.autocomplete-panel').load('/get/organization/' + '?' + $.param(params));
+                }
+                $('.autocomplete-panel').css({
+                    width: width + 12,
+                    top: position.top + 34,
+                    left: position.left + 5
+                }).show();
+            }).blur(function (e) {
+                e.preventDefault();
+                resetAutoCompletePanel();
+            }).on('input', function (e) {
+                var val = $(this).val();
+                var params = {keyword: val}
+                $('.autocomplete-panel').load('/get/organization/' + '?' + $.param(params))
             });
-            $('#search-text').keydown(function () {
-                $('#search-result').empty();
-            })
-            $('#search-text').blur(function () {
-                $('#search-result').empty();
-            })
+
+            function search(value) {
+                console.log('search');
+                $('.main-search input').val(value);
+                {#resetAutoCompletePanel();#}
+                {#showFilterPanel();#}
+                {#resetResultPanel();#}
+                {#showResultPanel(value);#}
+
+            }
+
+            function showFilterPanel() {
+                $('.filter-panel').show();
+            }
+
+            function resetFilterCompletePanel() {
+                $('.filter-panel').hide();
+            }
+
+            function resetAutoCompletePanel() {
+                $('.autocomplete-panel').html("<div style='padding: 10px; text-align: center'>loading...</div>").hide();
+            }
+
+            function showResultPanel(name) {
+                $('.result-panel').show();
+                $('.result-panel').load('{% url "get-organization" %}' + '?keyword=' + encodeURIComponent(name));
+            }
+
+            function resetResultPanel() {
+                $('.result-panel').html("        <div class=\"panel panel-default\">\n" +
+                    "            <div style=\"padding: 10px; text-align: center\">loading...</div>\n" +
+                    "        </div>")
+            }
         })
+
+
     </script>
 {% endblock %}
 
diff --git a/dashboard/templates/dashboard/results_by_keywords.html b/dashboard/templates/dashboard/results_by_keywords.html
new file mode 100644
index 0000000..a71486f
--- /dev/null
+++ b/dashboard/templates/dashboard/results_by_keywords.html
@@ -0,0 +1,24 @@
+{% load static %}
+<ul class="list-group">
+    {% for topten in topten_list %}
+        <li class="list-group-item">
+            <a href="#" class="autocomplete-panel-item" data-name="{{ topten.name }},{{ topten.province }},{{ topten.cities }},{{ topten.district }}" style="color: #16a085">
+                {{ topten.name }}- (<span id="lat">{{ topten.province }}</span>,<span
+                    id="lon">{{ topten.cities }}</span>,<span id="lon">{{ topten.district }}</span>)
+            </a>
+        </li>
+    {% endfor %}
+</ul>
+<script>
+
+    $(function () {
+        console.log("2222222222222222")
+        $('.autocomplete-panel-item').click(function (e) {
+            e.preventDefault();
+            var name = $(this).data('name');
+            console.log(name+"11111111111111111111111111111111")
+            $('.main-search input').val(value)
+        })
+    })
+
+</script>
diff --git a/dashboard/urls.py b/dashboard/urls.py
index 348931f..3b8ba25 100644
--- a/dashboard/urls.py
+++ b/dashboard/urls.py
@@ -18,6 +18,6 @@ urlpatterns = [
     path('get/town/',views.get_town),
     path('get/village/',views.get_village),
     #单位搜索
-    path('get/organization/',views.get_organization)
+    path('get/organization/',views.get_organization,name='get-organization')
 
 ]
diff --git a/dashboard/views.py b/dashboard/views.py
index 1ba1d63..b991a35 100644
--- a/dashboard/views.py
+++ b/dashboard/views.py
@@ -219,21 +219,26 @@ def get_village(request):
 
 
 def get_organization(request):
-    q = request.GET.get('q')
-    organization = Organization.objects.filter(name__contains=q)[:20]
-    res = []
-    for o in organization:
-        d = dict()
-        d['name'] = o.name
-        d['province'] = Area_code_2020.objects.get(code=o.province).name
-        if o.cities:
-            d['cities'] = Area_code_2020.objects.get(code=o.cities).name
-        else:
-            d['cities'] = ''
-        if o.district:
-            d['district'] = Area_code_2020.objects.get(code=o.district).name
-        else:
-            d['district'] = ''
-        res.append(d)
-    print(res)
-    return HttpResponse(json.dumps(res))
+    # q = request.GET.get('q')
+    # organization = Organization.objects.filter(name__contains=q)[:20]
+    # res = []
+    # for o in organization:
+    #     d = dict()
+    #     d['name'] = o.name
+    #     d['province'] = Area_code_2020.objects.get(code=o.province).name
+    #     if o.cities:
+    #         d['cities'] = Area_code_2020.objects.get(code=o.cities).name
+    #     else:
+    #         d['cities'] = ''
+    #     if o.district:
+    #         d['district'] = Area_code_2020.objects.get(code=o.district).name
+    #     else:
+    #         d['district'] = ''
+    #     res.append(d)
+    # print(res)
+    # return HttpResponse(json.dumps(res))
+    keywords = request.GET.get('keyword')
+    if len(keywords) != 0:
+        topten_list = Organization.objects.filter(Q(name__contains=keywords))
+        print(str(topten_list))
+        return render(request, 'dashboard/results_by_keywords.html', {'topten_list': topten_list})