在 Javascript 或 jquery 中键入功能时进行搜索？

Question

I'm trying to Implement search as you type feature and I'm not sure how to get substring after I type '@' in textarea.

Here is the fiddle what have I done https://jsfiddle.net/chille1987/zp3hx8ag/13/

$('#text').on('input', function(e) {

    if(e.originalEvent.data == '@') {
      $('.list').show();
      let cursorPosition = $(this).prop('selectionStart')

    $(this).on('input', function(e) {

      if(e.originalEvent.data == ' ') {
        $('.list').hide();
      } else {
        let value = $(this).val();
        let textForSearch = value.substr(cursorPosition, value.indexOf(' '))
        console.log(textForSearch)

        $(".list li").each(function() {
          if ($(this).html().toLowerCase().indexOf(textForSearch) != -1) {
            $(this).show();
          }
          else {
            $(this).hide();  
          }
        });
      }

    });
  }

});

<textarea id="text"></textarea>

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

.list {
  display: none;
}

Trying to figure out how to get text in this line: value.substr(cursorPosition, value.indexOf(' ')) - trying to get substring from cursorPosition until first blank space after cursor position. I can type @ anywhere in the text not just at the end.

Answer 1

I made some changes on your own code and now its working. this is how it works. We trace user input char by char, if it was '@' we set cursorPosition to index of cursor. else if was 'space', then we check : if text we have so far, is only spaces, just pass. else textForSearch is substr of cursorPosition to current input index without leading and ending spaces (trim()). then we compare with li's text.

Js:

let cursorPosition = -1;
$('#text').on('input', function(e) {
    if(e.originalEvent.data == '@') {
        $('.list li').show();
        cursorPosition = $(this).prop('selectionStart');
    }
    else if(e.originalEvent.data == ' ') {
        if (cursorPosition != -1 ){
            let value = $(this).val();
            let textForSearch = value.substr(cursorPosition,  
            $(this).prop('selectionStart')).trim().toLowerCase();
            if(! textForSearch){
                $('.list li').hide();
                return;
            }
            $(".list li").each(function(i, li){
                if($(li).html().toLowerCase().indexOf(textForSearch)) != -1) 
                {
                    $('.list').show();
                    $(li).show();
                }else {
                    $(li).hide();  
                }
            });
        }

        else{ 
              $('.list li').hide();
        }
     } 
  });

CSS:

.list li{
    display:none ;
}

Answer 2

I have modified the JS code

Try this javascript code instead of what you are using. working fiddle https://jsfiddle.net/raghulramkish/9mq0pbhk/

    var textForSearch="";
    var textareaValue="";
      $('ul.list li').click(function(e) 
        { 
        var val=$(this).text();
         textarea = document.getElementById('text').value;
          textarea = textarea + val;


     document.getElementById('text').value=
       textarea.replace("@"+textForSearch,"");
        });

On click on the list the above section will add the option to the text area (eg:instead of "@On" it will replace to One)

    $('#text').on('input', function(e) {

        if(e.originalEvent.data == '@') {
        $('.list').show();
        let cursorPosition = $(this).prop('selectionStart')

        $(this).on('input', function(e) {

          if(e.originalEvent.data == ' ') {
            $('.list').hide();
          } 
          else {
            let value = $(this).val();
             textForSearch = value.substr(cursorPosition, value.indexOf('@'))


            $(".list li").each(function() {
              if ($(this).html().toLowerCase().indexOf(textForSearch) != -1) {

                $(this).show();
              }
              else {
                $(this).hide();  
              }
                });
          }




        });
      }

    });

Instead of using " textForSearch = value.substr(cursorPosition, value.indexOf(' '))" use "textForSearch = value.substr(cursorPosition, value.indexOf('@'))".