用户单击 Jquery 自动完成结果后如何隐藏输入中的代码？

Question

我正在使用 python Flask 制作一个 Web 应用程序。

我正在使用 Jquery 自动完成功能来创建具有自动完成功能的搜索字段。

它工作正常。我设法在结果中显示图标、图像、html......

我的问题是当用户单击结果时，它会立即在文本字段中显示源代码，然后打开结果的链接。

当我点击“返回”按钮回到搜索页面时，这段代码还在输入中。

我尝试使用一些 javascript 代码将其删除：

document.getElementById('task_autocomplete').value = '';

没有用。我猜“返回”按钮没有重新加载页面，所以它没有执行这个 javascript 代码并从输入中删除代码。

这是我的 Wtform：

class SearchForm(FlaskForm): #create form
    searchbox_form = StringField('',id='task_autocomplete', validators=[DataRequired(),Length(max=40)],render_kw={"placeholder": "i.e. : Instagram influencers, Cold messaging Facebook..."})

这是我的带有 javascript 的 HTML 模板：

<div class="row d-flex justify-content-center text-center"><h5>Search for a task</h5></div>
<div class="row d-flex justify-content-center text-center">
    <p>&nbsp;</p>
    {{form.searchbox_form(class="form-control w-50 p-3",onfocus="this.value=''",)}}
</div>

$(function() {
        $.ajax({
            url: '{{ url_for("autocomplete") }}'
            }).done(function (data){
                $('#task_autocomplete').autocomplete({
                    source: data,
                    minLength: 2
                 }).data("ui-autocomplete")._renderItem = function (ul, item) {
                     return $("<li></li>")
                         .data("item.autocomplete", item)
                         .append(item.label)
                         .appendTo(ul);
             };
            });
        });

这是我的路线：

@app.route ('/_autocomplete', methods=['GET'])
def autocomplete():
    list_result = [
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-twitter"></i> P1 Followers of accounts ',
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-linkedin"></i> P2 Likers and Post Commenters ',
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-linkedin"></i> P2 Search by keywords & city ',
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-telegram"></i> Telegram Group Members ',
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-whatsapp"></i> P6 List of Phone Numbers ',
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-facebook-box"></i> P5 Group Members ',
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-instagram"></i> P3 Followers of accounts ',
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-google-maps"></i> P4 Map Search by keyword & city ',
        '<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-message-text"></i> SMS List of Phone Numbers ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-reddit"></i> Reddit Group Members ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-youtube"></i> Youtube Influencers ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-facebook-box"></i> P5 Page Admins ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-facebook-box"></i> P5 Group Admins ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-instagram"></i> P3 Influencers ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-twitter"></i> P1 Influencers ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-linkedin"></i> P2 Group Admins ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-linkedin"></i> P2 Page Admins ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-telegram"></i> Telegram Group Admins ',
        '<i class="mdi mdi-human-greeting menu-icon"></i> Influencers <i class="mdi mdi-whatsapp"></i> P6 Group Admins ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <img src=\'leboncoin_black.png\'> Leboncoin Ads ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <img src=\'yellow_pages_black.png\'> YellowPages Search by keywords & city ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <img src=\'craigslist_black.png\'> Craiglist Ads ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <img src=\'pagesjaunes_black.png\'> Pages Jaunes Search by keywords & city ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <i class="mdi mdi-linkedin"></i> P2 Search by keywords & city ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <i class="mdi mdi-linkedin"></i> P2 Group Members ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <i class="mdi mdi-facebook-box"></i> P5 Group Members ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <i class="mdi mdi-instagram"></i> P3 Followers of accounts ',
        '<i class="mdi mdi-database menu-icon"></i> Category B <i class="mdi mdi-google-maps"></i> P4 Map Search by keywords & city ',
        '<i class="mdi mdi-shape-plus menu-icon"></i> Authority <i class="mdi mdi-facebook-box"></i> P5 Add Group members as Friends ',
        '<i class="mdi mdi-shape-plus menu-icon"></i> Authority <i class="mdi mdi-instagram"></i> P3 Auto-Follow ',
        '<i class="mdi mdi-shape-plus menu-icon"></i> Authority <i class="mdi mdi-twitter"></i> P1 Auto-Follow ']

    return Response (json.dumps (list_result), mimetype='application/json')


@app.route ('/new_campaign_task', methods=['GET', 'POST'])
@login_required
def new_campaign_task():
    # Let's get the list of tasks and details for this platform
    form = SearchForm (request.form)       
    

    return render_template ('new_campaign_task.html', title='New Campaign',form=form)

我到处寻找解决方案，但没有任何结果。我想我的情况非常特殊，非常罕见。没有人从不发布有关此问题的问题。

你知道如何隐藏这段代码吗？

Answer 1

如果您要发回有效载荷，例如：

'<i class="mdi mdi-message-text-outline menu-icon"></i> Category A <i class="mdi mdi-twitter"></i> P1 Followers of accounts '

我会在 JS 中分解它，以便您可以构造一个对象。然后我们会：

• 类别图标<i class="mdi mdi-message-text-outline menu-icon"></i>
• 类别Category A
• 标签图标<i class="mdi mdi-twitter"></i>
• 标签P1 Followers of accounts

对象看起来像这样：

{
  category: "Category A",
  label: "P1 Followers of accounts",
  value: "P1 Followers of accounts",
  catIcon: "<i class='mdi mdi-message-text-outline menu-icon'></i>",
  labIcon: "<i class='mdi mdi-twitter'></i>"
}

然后你可以使用这样的代码。

$(function() {
  $('#task_autocomplete').autocomplete({
    source: function(req, resp) {
      var results = [];
      $.get('{{ url_for("autocomplete") }}', req, function(data) {
        $.each(data, function(i, el) {
          results.push({
            category: el.substr(el.indexOf("i>") + 2, el.lastIndexOf("<i")),
            label: el.substr(el.lastIndexOf("i>") + 2),
            value: el.substr(el.lastIndexOf("i>") + 2),
            catIcon: $("i:first", el),
            labIcon: $("i:last", el)
          });
        });
        resp(results);
      });
    },
    minLength: 2,
    _renderItem: function(el, item) {
      return $("<li>")
        .append("<div>" + item.catIcon + item.category "<br>" + item.labIcon + item.label + "</div>")
        .appendTo(ul);
    }
  });
});

当用户返回页面时，他们将在字段中看到 P1 Followers of accounts 作为值而不是 HTML 文本。