Question

我在网站上输入搜索内容，并为此分配了onkeyup事件。例如，我的字符串是：“ hello world”，并且当用户键入“ llo”（或其他任何字符）时，匹配的字符以高亮显示，并在输入下方的搜索列表中以其他字符高亮显示（例如Google搜索）。我尝试这样做，但是我的代码适用于第一个字符而不是字符串的所有字符我的代码：

//html
<input  type="text" onKeyUp="search_customer(this)">
<div class="data_list"></div>

//javascript
function search_customer(input){

        var text = input.value;
    if(text == ''){
        input.nextElementSibling.style.display = 'none';
        return;
    }
 var xhr = new XMLHttpRequest();
    xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                var result = JSON.parse(xhr.responseText);
                show_results(result , input);
            }else{
                alert('request was unsuccessful : ' + xhr.status);
            }
    }
    xhr.open('post' , "<?php echo base_url('deal/search/')?>" , true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('text_search=' + text);

}

    function show_results(res , input){
        var datalist = input.nextElementSibling;
        datalist.style.display = 'block';
        if(res.length == 0){
        datalist.innerHTML = '<div>nothing matched!<div>';
        }else{
            var div = document.createElement('div');
            for(var i = 0 ; i < res.length ; i++){
                if(res[i].full_name.substr(0 , input.value.length) == input.value){
var str = '<strong>'+res[i].full_name.substr(0 , input.value.length)+'</strong>' + res[i].full_name.substr(input.value.length);
                var p = div.appendChild(document.createElement('p'));
                p.innerHTML = str;
                }
            }
            datalist.replaceChild(div , datalist.firstChild);
        }
     xhr.open;
    }

Answer 1

您可以使用indexOf获取匹配字符串中的第一个索引，然后计算最后一个索引。同样，最好使用方法slice来使用负索引。

function search_customer(input){

        var text = input.value;
    if(text == ''){
        input.nextElementSibling.style.display = 'none';
        return;
    }
 var xhr = new XMLHttpRequest();
    xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                var result = JSON.parse(xhr.responseText);
                show_results(result , input);
            }else{
                alert('request was unsuccessful : ' + xhr.status);
            }
    }
    xhr.open('post' , "<?php echo base_url('deal/search/')?>" , true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('text_search=' + text);

}

    function show_results(res , input){
        var datalist = input.nextElementSibling;
        datalist.style.display = 'block';
        if(res.length == 0){
        datalist.innerHTML = '<div>nothing matched!<div>';
        }else{
            var div = document.createElement('div');
            for(let i = 0 ; i < res.length ; i++){
                let search = input.value; 
                let match;    
                let lastIndx = (res[i].full_name.length-1) - res[i].full_name.indexOf(search) - (search.length-1);
                if(lastIndx == 0){
                    match = res[i].full_name.slice(res[i].full_name.indexOf(search), res[i].full_name.length);
                }else{
                    match = res[i].full_name.slice(res[i].full_name.indexOf(search), -lastIndx);
                }
                let str = res[i].full_name.slice(0, res[i].full_name.indexOf(search) ) + '<strong>' + match + '</strong>'+ res[i].full_name.slice(res[i].full_name.length-lastIndx, res[i].full_name.length);

                let p = div.appendChild(document.createElement('p'));
                p.innerHTML = str;
            }
            datalist.replaceChild(div , datalist.firstChild);
        }
     xhr.open;
    }

用JavaScript突出显示字符串中的子字符串

1 个答案: