Autocomplete for search engine strange behavior

I am using an autocompletion script for the search engine it works correctly but I have a problem that when I try to use any shortcut with the # symbol it copies it to the search engine input, for example I try to access a div with <a href="#div1"><a>and it copies it to the input. .

script

<script>
  $(document).ready(function(){
   $('#nombre').keyup(function(){
          var query = $(this).val();
          if(query != '')
          {
           var _token = $('input[name="_token"]').val();
           $.ajax({
            url:"{{ route('autocomplete.fetch') }}",
            method:"POST",
            data:{query:query, _token:_token},
            success:function(data){
             $('#List').fadeIn();
                      $('#List').html(data);
            } }); } });
      $(document).on('click', 'li', function(){
          $('#nombre').val($(this).text());
          $('#List').fadeOut();
      });

  });
  </script>

Controller "I think the problem is in the Script but I share the Controller in case it is necessary"

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class AutocompleteController extends Controller
{

    function index()
    {
     return view('autocomplete');
    }

    function fetch(Request $request)
    {
     if($request->get('query'))
     {
      $query = $request->get('query');
      $data = DB::table('products')
        ->where('nombreyape', 'LIKE', "%{$query}%")
        ->get();
      $output = '<ul class="dropdown-menu" style="display:block; position:absolute">';
      foreach($data as $row)
      {
       $output .= '
       <li><a href="#">'.$row->nombreyape.'</a></li>
       ';
      }
      $output .= '</ul>';
      echo $output;
     }
    }

}

More extensive explanation of my failure

The problem is that if I try to call any div using the #, for example, <a href="#div1"><a>or <a href="#loquequieras"><a>it doesn't matter if the div doesn't exist, but when I click on the link, the text copies it to the search engine, for example, <a href="#div1"><a>it copies me to the div1 search engine.