ደቨሎፐራት፡ ብኣውቶኮምፕሊት (Autocomplete) ገይርኩም ናይ Google API ክረዲት ምዕቃብ

ብሓዲሽ ናይ Google API ዋጋታት ብዙሓት ተረባሕቲ ኣለዉ። ይኹን እምበር፡ ኣፕሊኬሽንኩም ንኹሉ ናይ ካርታ ስራሕ ዝጥቀም እንተኾይኑን ብዙሓት ተጠቀምቲ እንተሃልዮምኹምን፡ እቲ ዝተመደበልኩም ክረዲት ቀልጢፉ ክጎድል ከም ዝጅምር ከተስተውዕሉ ትኽእሉ ኢኹም። ካብቲ ዝተመደበልኩም ክረዲት ብቐጥታ ዝወስዱን ኣብቲ መዓልታዊ ናጻ ኮታ ዘይሕወሱን ክልተ ተግባራት፡ ኣውቶኮምፕሊትን (autocomplete) ምድላይ ቦታን (place search) እዮም።

ናይ Google ፍቓድኩም ምስ Scribble Maps API እትጥቀሙ እንተኾይንኩም፡ ገለ ካብዞም ምምሕያሻት ብባህርይና ንገብሮም ኢና፣ ነገር ግን ብቐጥታ ኣብ ልዕሊ Google Maps API ናይ ባዕልኹም ፍሉይ ኣተገባብራ ትሰርሑ እንተሃሊኹም፡ ገለ ናይ ኣውቶኮምፕሊት ክረዲት ንምዕቃብ ክትገብርዎ የምትኽእሉ ቀሊል ምምሕያሽ ኣሎ።

እቲ ልሙድ ናይ ኣውቶኮምፕሊት ስራሕ፡ ኣብቲ እታው (input) ዝግበር ዝኾነ ለውጢ ምስ ዝህሉ ናይ ኣውቶኮምፕሊት ሕቶ ይሰድድ እዩ። እቲ እታው ክቕየር ከሎ ናይ ግዜ ገደብ (timeout) ብምእታው፡ ነቲ ዝጥቀስ ክረዲት ብዕጽፊ ክትቅንስዎ ይከኣል እዩ።

እነሆ ፍረ-ነገር ዘለዎ ኣብነት።

 var acTimeOut;  
 textSearchInput.onkeyup = function() {  
 clearTimeout(acTimeout);  
 acTimeout = setTimeout(function() {  
 //put auto-complete calls in here  
 }, 250);  
 }  

ስለዚ ሓደ ተጠቃሚ ኣብቲ እታው ክጽሕፍ ምስ ዝጅምር፡ እቲ ኣውቶኮምፕሊት ንእሽቶ ናይ ግዜ ምድንጓይ ክሳብ ዝህሉ ኣይሰርሕን እዩ። እቲ ናይ 250ms ምድንጓይ፡ እቲ ኣውቶኮምፕሊት ብተደጋጋሚ ክሰርሕ ንምግባር ክቕነስ ይከኣል እዩ። እቲ ተጠቃሚ ብቕልጡፍ "Toronto" ኢሉ እንተጻሒፉ፡ እቲ ተጠቃሚ ኣብ ዝደናጎየሉ እዋን ኣብ ክንዲ 8 ናይ ኣውቶኮምፕሊት ጻውዒት፡ ሓደ ጥራይ እዩ ክፍጸም።

እቲ ብግዜ ዝተደረተ ምድንጓይ ዝበለጸ ከም ዝሰርሕ ንዕዘብ። ንእዚ ወሳኒ ነጥቢ፡ እቲ ተጠቃሚ ክጽሕፍ ከሎ እቲ ናይ ተጠቃሚ መተሓላለፊ (user interface) ምድላይ ይካየድ ከም ዘሎ ዘመልክት ምዃኑ ምርግጋጽ እዩ። ኣብዚ ናትና ጉዳይ፡ ምንቅስቓስ ዘለዎ ስፒነር (animated spinner) ንጥቀም። በዚ መንገዲ እዚ፡ እቲ ተጠቃሚ ብቕልጡፍ ይጽሕፍ እንተሃልዩ እሞ ውጽኢት እንተዘይርእዩ፡ እቲ ምንቅስቓስ ዘለዎ ስፒነር ነቲ ውጽኢት ንምርኣይ እኹል ዕረፍቲ ክህቦም እዩ።

እዚ ምትግባር ምስቲ ናይ ሕጂ ውዕል ኣጠቓቕማኦም ዝሰማማዕ ምዃኑ ክንገር ይግባእ። እዚ ኣገባብ እዚ ብመሰረቱ ዝገብሮ ነገር፡ ካብቲ ተጠቃሚ ዝወጽእ ናይ ኣውቶኮምፕሊት ጻውዒታት መጠን ምቁጽጻር ጥራይ እዩ።