AJAX/Fetch Auto Complete from massive DB

AJAX/Fetch Auto Complete from massive DB

I have a database or world cities, over 3 million rows. I want users to search for a city and for them to click a city of choice and obtain the database row number.

I can't just list all the rows due to the size so was going to do a ajax type call after a user enters a minimum of 4 chars. I may however need a Search button so I can't call it on the 4th, 5th and 6th letters.

Here's what I have which works but is slow.

Are there any other ways of doing this?

  1. $( "#txtSearch"). keyup( function(){
                     var  search =  $( this). val();
                     if( search. length >  4){
                         console. log( 'Searching...');
                         $. ajax({
                             url:  'search.php',
                             type:  'post',
                             data: { search:search},
                             dataType:  'json',
                             success : function( response){
                                 var  len =  response. length;
                                 $( "ul"). empty();
                                 for(  var  i =  0;  i< len;  i++){
                                     $( "ul"). append( "<li value='"+ response[ i][ 'CityID']+ "'>"+ response[ i][ 'City']+ " (" +  response[ i][ 'ISO_Country'] +  ")</li>");
                                }
     
                            }
                        });
                    }  else {
                         console. log( 'Too Short');
                    }
                });