Evidenziare più parole chiave per jQuery.autocomplete
-
12-09-2019 - |
Domanda
sto usando il jQuery completamento automatico plug , ma sto avendo alcuni problemi con la risultato mettendo in evidenza. Quando viene trovata una corrispondenza, ma la parola chiave immessa contiene spazi, non c'è evidenziazione. Esempio:
search = "foo", risultato = "foo bar", visualizzato = " foo bar"
ricerca = "ba foo", risultato = "foo bar", visualizzati = "foo bar"
Quindi, sto cercando di risolvere questo problema utilizzando l'opzione highlight della di la funzione di completamento automatico in cui è possibile utilizzare una funzione per fare alcune cose su misura con i risultati. Attualmente ho questo:
$('.autocomplete').autocomplete('getmatch.php', {
highlight: function(match, keywords) {
keywords = keywords.split(' ').join('|');
return match.replace(/(get|keywords|here)/gi,'<b>$1</b>');
}
});
La funzione di sostituzione sostituisce tutte le parole corrispondenti nella stringa con una versione in grassetto, che funziona. Tuttavia, non so come ottenere le parole chiave in tale funzione. Io però li avrei diviso, e poi unisco a loro con un '|', in modo da "foo bar" si conclude in su come "foo | bar". Ma qualcosa di simile a questo non sembra funzionare:
return match.replace(/(keywords)/gi,'<b>$1</b>'); // seen as text, I think
return match.replace('/'+(keywords)+'/gi','<b>$1</b>'); // nothing either
Tutte le idee?
Soluzione
Utilizza il RegExp
costruttore per creare un RegExp oggetto da una stringa:
$('.autocomplete').autocomplete('getmatch.php', {
highlight: function(match, keywords) {
keywords = keywords.split(' ').join('|');
return match.replace(new RegExp("("+keywords+")", "gi"),'<b>$1</b>');
}
});
Altri suggerimenti
ho ottimizzato l'implementazione di completamento automatico iniziale come i caratteri speciali di cui sopra è semplificata e non si occuperà regex nel periodo.
function doTheHighlight(value, term) {
// Escape any regexy type characters so they don't bugger up the other reg ex
term = term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1");
// Join the terms with a pipe as an 'OR'
term = term.split(' ').join('|');
return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
}
La vostra funzione dovrebbe utilizzare questa firma: la funzione (valore, termine). Il termine valore e sarà popolato dal plug-in automatico e avere i valori necessari.