正在传递尚未提交给python的html搜索框字符串

2024-04-25 21:18:52 发布

您现在位置：Python中文网/ 问答频道 /正文
8343 3

我有一个html搜索框。 如果用户点击他们的键盘，我想传递这个尚未提交给python的变量。 我不知道该怎么办。 第一个代码是html搜索框部分，第二个代码是python代码

<br> <input name="Country" type="text" id="Country" placeholder="Enter Country" oninput="myFunction()"/> oninput:  <span id="result"></span>
    <script>
        function myFunction() {
//          result.innerHTML = Country.value;
            result.innerHTML = output;
        }; 
    </script>

@auth.route('/search', methods=['POST'])
def autoComplete():
    country = request.form[Country.value]
    output = autoCompletion.init(country)
    return render_template("search.html", output=output)

是否有任何方法可以传递尚未提交给python的html搜索框字符串？ 任何帮助都将不胜感激


Tags： 代码用户idoutputsearchvaluehtmlscript
1条回答
网友
1楼 · 发布于 2024-04-25 21:18:52

这是一个使用AJAX而不提交表单的简单示例

表单字段中的每次更改都会在后台向服务器发送请求。然后，将收到的数据添加到分配给表单字段的数据列表中

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/complete')
def complete():
    countries = ['China', 'India', 'USA']
    country = request.args.get('country', '')
    results = [x for x in countries if x.startswith(country)]
    return jsonify(results=results)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form>
      <input type="text" name="country" list="countries" placeholder="Enter Country" />
      <datalist id="countries"></datalist>
    </form>

    <script type="text/javascript">
      (function() {
        let countryField = document.querySelector("input[name='country']");
        countryField.addEventListener('input', function(event) {
          fetch(`/complete?country=${encodeURIComponent(countryField.value)}`)
            .then(resp => resp.json())
            .then(data => {
              const dataList = document.getElementById("countries");
              dataList.innerHTML = "";
              
              const results = data.results;
              results.forEach(item => {
                let elem = document.createElement("option");
                elem.setAttribute("value", item);
                dataList.appendChild(elem);
              });

            })
            .catch(err => console.error("Error:", err));
        }, false);
      })();
    </script>
  </body>
</html>

代码当然可以改进，但它说明了在不重新加载页面或最终发送表单的情况下动态获取数据的可能性。
为了使您的工作更容易，我建议使用jQuery之类的库

相关问题 更多 >

    编程相关推荐