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

我正在用python Flask制作一个web应用程序

我正在使用jqueryautocomplete创建一个具有自动完成功能的搜索字段

它很好用。我设法在结果中显示图标、图像和HTML

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

当我点击“返回”按钮返回到搜索页面时，该代码仍在输入中

我尝试用一些javascript代码删除它：

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

它不起作用。我猜“后退”按钮没有重新加载页面，因此它没有执行此javascript代码并从输入中删除代码

这是我的表格：

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);
             };
            });
        });

搜索任务

{{form.searchbox_form（class=“form control w-50 p-3”，onfocus=“this.value=”，）}
$（函数（）{
$.ajax({
url:“{url_for（“自动完成”）}”
}).完成（功能（数据）{
$（“#任务_自动完成”）。自动完成({
资料来源：数据，
最小长度：2
}).data（“ui自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（item.label）
.附录（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)

@app.route（'/_autocomplete'，methods=['GET']）
def autocomplete（）：
列表\u结果=[
“A类P1账户追随者”，
“A类P2喜欢者和后评论者”，
“按关键字和城市进行A类P2搜索”，
“A类电报组成员”，
“A类P6电话号码列表”，
“A类P5集团成员”，
“A类P3账户追随者”，
“按关键字和城市搜索A类P4地图”，
“A类短信电话号码列表”，
“影响者Reddit组成员”，
“影响者Youtube影响者”，
“影响者P5页面管理员”，
“影响者P5组管理员”，
“影响者P3影响者”，
“影响者P1影响者”，
“影响者P2组管理员”，
“影响者P2页面管理员”，
“影响者电报组管理员”，
“影响者P6组管理员”，
“B类Leboncin广告”，
“按关键字和城市搜索B类黄页”，
“B类Craiglist广告”，
“按关键字和城市搜索B类页面”，
“B类P2按关键字和城市搜索”，
“B类P2集团成员”，
“B类P5集团成员”，
“B类P3账户追随者”，
“按关键字和城市搜索B类P4地图”，
“授权P5将组成员添加为好友”，
“授权P3自动跟踪”，
“授权P1自动跟踪”]
返回响应（json.dumps（list_result），mimetype='application/json'）
@app.route（'/new\u campaign\u task'，methods=['GET'，'POST']）
@需要登录
定义新的活动任务（）：
#让我们获取此平台的任务和详细信息列表
表单=搜索表单（request.form）
返回呈现模板（'new\u campaign\u task.html'，title='new campaign'，form=form）

我到处寻找解决办法，但没有任何结果。我想我的情况很特殊，也很罕见。没有人会就这个问题发帖

---

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

如果你想发回一个有效负载，比如：

“账户的A类P1追随者”

我将在JS中对其进行分解，以便您可以构造一个对象。届时，我们将：

• 类别图标

• 类别

  A类

• 标签图标

• 标签

  P1账户追随者

然后，对象将看起来像这样：

{
  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>"
}

{
类别：“A类”，
标签：“P1账户追随者”，
值：“帐户的P1追随者”，
catIcon:“，
拉比肯：“
}

然后可以使用这样的代码

$(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);
    }
  });
});

$（函数（）{
$（“#任务_自动完成”）。自动完成({
来源：功能（请求、响应）{
var结果=[]；
$.get（{{url\u for（“autocomplete”）}），req，函数（数据）{
$。每个（数据、功能（i、el）{
结果：推({
类别：el.substr（el.indexOf（“i>”）+2，el.lastIndexOf（“i>”）+2），
值：el.substr（el.lastIndexOf（“i>”）+2），
catIcon:$（“i:第一”，el），
标签图标：$（“i:last”，el）
});
});
resp（结果）；
});
},
最小长度：2，
_renderItem：功能（el，项目）{
返回$（“
”）
.append（“+item.catIcon+item.category”
“+item.labIcon+item.label+”）
.附录（ul）；
}
});
});

---

当用户返回页面时，他们将在字段中看到帐户的

P1 Followers

作为值，而不是HTML文本。

请提供一个最小的、可复制的示例：包括一个用于测试的返回数据示例。感谢您的帮助。我通过添加最小可复制代码来编辑问题。该字段显示与标签相同的

值。由于
值
仅为文本，因此不会呈现为HTML。我建议返回一个更复杂的JSON负载，它可以让您更好地构建列表，并为您提供适当的
值
。非常感谢@Twisty的帮助。你的代码破坏了图标和URL。我习惯于看到每一行的两个图标，结果是可以点击的。现在已经不是了。没有链接，没有图标。请参见屏幕截图和。我试着自己解决，但我不是前男友