前端搜索--匹配内容,输出结果

问题描述

用户通过搜索框搜索道路名称(已通过ajax获取到),从而进行匹配,匹配完成后输出到指定的页面

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
html代码

<div class="query">
    <input id="keyword" placeholder="道路名称" type="text">
    <input class="queryButton" type="submit" value="查询">
</div>
<div id="rightQuery">
    <div id="#content_news_list"></div>
</div>

js代码

$(".queryButton").on("click", function (event) {
$("#rightQuery").show();
$("#openButtonRight").hide();
$("#closeButtonRight").show();
event.stopPropagation();
event.preventDefault();
$("input[type=text]").change(function () {
    let searchText = $(this).val();     //获取输入的搜索内容
    if (searchText !== "") {
        if (displayData.roadname) {
            let roadJamSource=searchText.find(displayData.roadname);  //从获取到的信息中匹配输入的搜索内容
            $("#content_news_list").setText(roadJamSource);//如果找到,写入到右侧div中
        }else{
            $("#content_news_list").html("<li>not find</li>")
        }
    }
});

你期待的结果是什么?实际看到的错误信息又是什么?

匹配成功后输出到指定div即可

阅读 231
评论 更新于 2019-10-10
    1 个回答
    xiaofeizao
    • 1
    • 新人请关照

    首先你代码根本运行不了
    然后你要搞清楚find这个api怎么用!searchText的类型是string原型链上都没有find方法!
    $("#openButtonRight").hide();
    $("#closeButtonRight").show();
    这里面的两个dom节点在哪里

    评论 赞赏 2019-10-10