在textbox裡面打關鍵字，gridview裡面的關鍵字要Mark起來。

Question

在textbox裡面打關鍵字，gridview裡面的關鍵字要Mark起來，找到jquery套件filteringHighlight可以用，但是我是asp.net c# web form，textbox要到後端查詢使用，加上runat='server'的物件，就會失效，我是參考https://www.jqueryscript.net/text/highlight-as-type.html的jquery寫法，但是
不可以有runat='server'，我目前使用這個寫法，配合上textbox只能輸入一個英文字或一個數字，不能輸入英文單字或一個字串或2個以上的數字，想跟它寫法一樣做出可輸入一個字串就mark gridview字串的方式?謝謝大家。

Answer 1

给你个示例吧：

1. 将属性数据加载到弹出窗口
   在用户点击要素(点、线、面)时,弹出属性窗口。此时发送Ajax请求,查询要素相关属性数据,并将Json结果加载到窗口。
   例如,在点要素点击事件中:

js
vectorLayer.getFeatureInfo({
    coordinate: clickedCoordinate,
    tolerance: 5, 
    onSuccess: function(data) {
        // 得到属性数据
        $("#attributesContainer").html(getAttributesHTML(data.attributes));
    }
});

然后 getAttributesHTML() 方法将Json属性转为HTML显示在窗口。
2. 绑定 wantoute属性到页面元素
也可以将属性数据先绑定到要素对象上,在弹出窗口时直接获取并显示。
例如:

js
let feature = vectorLayer.getFeatureByCoordinate(clickedCoordinate);
$("#attributesContainer").html(getAttributesHTML(feature.getProperties())); 

1. 自定义属性窗口显示内容
   上面两种方法会将全部属性显示在窗口。也可以根据需要只显示部分属性,或以表格、列表等形式自定义窗口显示内容。
   此外,对于在文本框输入关键字,Grid显示高亮匹配项的需求,可以:
2. 文本框input事件监听,获取输入值
3. 根据输入值过滤Grid数据源, highlight匹配的行
4. input值变化时重复步骤2,进行动态高亮显示
   例如:

js
$("#input").on("input", function() {
  let keyword = $(this).val();
  // 过滤数据源并highlight
  grid.setSource(dataSource.filter(item => 
    item.name.indexOf(keyword) !== -1
  ));
  highlightRowsContains(grid, keyword);
});
highlightRowsContains() 方法可以根据关键字高亮Grid对应的行。