2015-04-21 102 views
7

在jquery數據表中,我必須用精確匹配過濾結果並突出顯示它。完全匹配我正在嘗試下面的代碼,但它不起作用。 fiddle搜索完全匹配,並突出顯示jquery數據表正則表達式

table.aoPreSearchCols[ iCol ].sSearch = "^\\s*"+'1'+"\\s*$"; 
table.aoPreSearchCols[ iCol ].bRegex = false; 
table.aoPreSearchCols[ iCol ].bSmart= false; 
+0

可以描述_「它不工作」_?似乎在http://jsfiddle.net/yg32o2yh/5/返回匹配? – guest271314

+0

當我鍵入「xon」時,則選擇第一行。但在沒有詞從「xon」盯着 – Carlos

+0

預期結果查詢'xon' _不匹配'老虎尼克松'? – guest271314

回答

10

我認爲你需要使用一個word boundary\b

匹配單詞邊界。單詞邊界與單詞字符未被跟隨或前面有另一個單詞字符的位置匹配。

所以,當你有搜索術語「限制」和字符串「我的話有沒有限制」,「是無限」只有第一個字符串匹配。所以

$('#search-inp').keyup(function(){ 
    var term = $(this).val(), 
     regex = '\\b' + term + '\\b'; 

    table.columns(1).search(regex, true, false).draw(); 
}) 

亮點

定義一些靜態的「高亮標記」注入,爲了去除突出的搜索匹配:

var hlBegin = '<strong class="highlight">', 
    hlEnd = '</strong>'; 

添加亮點標籤欄內容:

function highlight(term) { 
    var row, str, 
     rowCount = table.rows().nodes().length, 
     regexp = new RegExp('('+term+')', 'ig'); 

    for (row=0; row<rowCount; row++) { 
     str = table.cell(row, 1).data(); 
     str = str.replace(regexp, function($1, match) { 
      return hlBegin + match + hlEnd; 
     }) 
     table.cell(row, 1).data(str).draw(); 
    }   
} 

刪除高亮標記:

function removeHighlight() { 
    var row, str, 
     rowCount = table.rows().nodes().length; 

    for (row=0; row<rowCount; row++) { 
     str = table.cell(row, 1).data(); 
     str = str.replace(/(<([^>]+)>)/ig, ''); 
     table.cell(row, 1).data(str).draw(); 
    }   
}  

設置它一起:

$('#search-inp').keyup(function(){ 
    var term = $(this).val(), 
     regex = '\\b' + term + '\\b'; 

    removeHighlight(); 
    table.columns(1).search(regex, true, false); 
    highlight(term); 
}) 

分叉的小提琴 - >http://jsfiddle.net/Lnvbnp6c/


更新。我得到了印象(通過評論),任何地方的單詞都應該匹配。如果它是關於在列的開始全字匹配:

regex = '^' + term + '\\b'; 

http://jsfiddle.net/Lnvbnp6c/1/

如果只是匹配字符列開始,而不是nessecarily整個單詞:

regex = '^' + term; 

http://jsfiddle.net/Lnvbnp6c/2/

當用戶在搜索字段中輸入內容時,最後一個用戶可能會最喜歡。


作爲一種替代方法,你可以嘗試使用自定義過濾器:

$('#search-inp').keyup(function() { 
    var str, 
     term = $(this).val(), 
     regexp = new RegExp('\\b' + term + '\\b', 'ig'); 

    removeHighlight();  
    $.fn.dataTable.ext.search.push(
     function(settings, data, dataIndex) { 
      str = data[1]; 
      return regexp.test(str) ? true : false; 
     }  
    ); 
    table.draw(); 
    highlight(term);  
    $.fn.dataTable.ext.search.pop(); 
}) 

演示與亮點如上 - >http://jsfiddle.net/x96hzok4/

我的印象是,這是一點點更快。當然,如果你有很多行,並且想在多列上搜索,我認爲你應該考慮一個自定義過濾器,並且考慮不要在所有字符串上製作耗時的完整正則表達式。

+0

非常感謝你的回答。還有一個想法。我檢查了你附帶的小提琴。我需要修改字邊界。正則表達式應該匹配世界首發。 – Carlos

+0

就像我輸入「Tige」一樣。然後它應該首先選擇,我已經從正則表達式中刪除了最後一個'\\ b',但是當我輸入「T」時,那麼單詞之間的單詞也會突出顯示 – Carlos

+0

哎@amit,實際上是我開始了與 - 但當我看到評論時: - 我有兩段「我的話沒有限制」「它是無限的」。如果我輸入限制,那麼第一段應顯示並更改focus_。查看更新是否有完全匹配的開始單詞,或只匹配起始字符......似乎是您真正想要的起始字符。 – davidkonrad

0

嘗試

$('#search-inp').keyup(function(){ 
     var elem = $(this) 
     table.columns(1) 
     .search("^\\s*"+elem.val()+"\\s*$", true) 
     .draw() 
    }); 

的jsfiddle http://jsfiddle.net/yg32o2yh/6/

column().search();又見$.fn.dataTable.util.escapeRegex()

+0

謝謝你的努力。您的代碼正在從段落的開頭和結尾進行搜索。我們可以使用\ b,當我們在搜索文本框中留空時,它有問題 – Carlos

+0

@amit在原始帖子中使用了'RegExp'。不正確的解釋 - 「我們在搜索文本框中留空時存在問題」_正確?可以描述細節? – guest271314

+0

如果你搜索一些東西,如果你刪除搜索文本,那麼所有的列表應該對用戶可見,但它沒有發生 – Carlos

1

嘗試

$('#search-inp').keyup(function(){ 
    var key = $(this).val(); 
    var regExp = "." 
    if (key) 
     regExp = "^\\s*" + key + "\\s*$"; 

    table.columns(1).search(regExp, true).draw(); 
}); 

當搜索key是空始終將其設置爲.比賽anyregex

相關問題