jquery 根据用户输入填充输入字段

1qczuiv0  于 2022-11-29  发布在  jQuery
关注(0)|答案(1)|浏览(183)

这类问题以前可能有人问过,但我已经在这个问题上翻了好几天的table,真的希望有人能帮忙。我正在部署一个应用程序,用户可以在其中选择一个特定的主题。在用户选择了他的主题后,相应的数据应该显示在其他输入字段中。数据通过neo4jDB收集,然后通过Flask传递到.html文件。get_person方法返回一个列表,其中包含所有与特定(选定)主题相关的人,这些人应该会显示在输入字段中。

主文件.py

from flask import Flask, render_template, request,redirect,session, Response

class SearchForm(Form):
    autocomp=TextField('Insert a Topic',id='autocom')
    auto_ifxp=TextField('Person',id="person")

@application.route("/_autocomplete",methods=["GET"])
def autocomp():
    topic=request.form.getlist("autocom")
    topic=get_topic()
    return Response(json.dumps(topic),mimetype='application/json')

@application.route("/_autocomplete_p",methods=["GET"])
def autocom_ifx():
    topic=request.form.getlist("autocom")
    person=get_person(topic)
    return Response(json.dumps(person),mimetype='application/json')

** Jmeter 板.html**

<label for="autocom">Insert</label><input id="autocom" name="autocom" type="text">
<label for="person">Insert</label><input id="person" name="autocom_p" type="text">
<script>
            $(function(){
                $.ajax({
                    url:'/_autocomplete'
                }).done(function (data){
                    $('#autocom').autocomplete({
                        source: data,
                        minLength: 1

                    });
                });

            });
        </script>
        <script>
            $(function(){
                $.ajax({
                    url:'/_autocomplete_p'
                }).done(function (data){
                    $('#ifx_person').autocomplete({
                        source: data,
                        minLength: 0

                    });
                });

            });
        </script>
htrmnn0y

htrmnn0y1#

确保你 AJAX 调用工作正常,并将autocom发布到相应的url。

<script>
    $("#id_autocom").change(function () {
      var autocom = $(this).val();

      $.ajax({
        url: '_/autocom/',
        data: {
          'autocom': autocom
        },
        dataType: 'json',
        success: function (data) {
          if (data) {
           //Fill data in html dom
            alert("Getting data from back-end");
          }
        }
      });

    });
  </script>

相关问题