אנו מספקים פיתוח מקצה לקצה של חיפוש אוטומטי (autocomplete) באפליקציות מובייל: ארכיטקטורת שאילתות, debounce, ביטול בקשות מיושנות, שמירת הצעות במטמון, היסטוריית חיפוש והדגשת התאמות. המשימה נפתרת ב-Swift, Kotlin, Dart ו-React Native. מהניסיון שלנו: בפרויקט אחד, המעבר לחיפוש אוטומטי קיצר את הזמן לתוצאה הראשונה מ-2.1 שניות ל-0.4 שניות — שיעור ההמרה מהחיפוש עלה ב-18%.
שתי נקודות כאב עיקריות הן race conditions וחפיפת מקלדת. Race condition: תגובה לבקשה מיושנת מגיעה מאוחר יותר מבקשה חדשה ומחליפה את רשימת ההצעות. הפתרון — flatMapLatest (אנדרואיד) או switchToLatest() (iOS): עם כל תו חדש, הבקשה הקודמת מבוטלת אוטומטית. המקלדת חופפת את ההצעות אם העוגן התחתון של הרשימה מחובר למסך ולא למקלדת. אנו מתקנים זאת באמצעות KeyboardAvoiding (RN) או WindowInsetsCompat (אנדרואיד), ודנים בפרט זה עם המעצב לפני כתיבת הקוד.
פיתוח חיפוש כזה כולל מספר שלבים טכניים: בחירת ארכיטקטורה, debounce, מטמון, היסטוריה והדגשה. להלן המכניקה הספציפית של כל אחד עם דוגמאות קוד.
בחירת הגישה: חיפוש בצד הלקוח או בצד השרת?
בחירת ארכיטקטורת החיפוש קובעת את זמן הפיתוח וההתנהגות במצב לא מקוון. שלוש אפשרויות עובדות:
| גישה | מתי להשתמש | טכנולוגיה | זמן תגובה |
|---|---|---|---|
| צד הלקוח | מערך נתונים עד 5,000 רשומות | fuse.js (RN), fuse_dart (Flutter), Room FTS4 (אנדרואיד) | <50 אלפיות השנייה |
| צד השרת | קטלוג גדול, התאמה אישית | REST/GraphQL + debounce | 100–400 אלפיות השנייה |
| משולב | מסחר אלקטרוני, מרקטפלייס | מטמון לא מקוון + גיבוי API | <100 אלפיות השנייה |
חיפוש בצד הלקוח באמצעות fuse.js מהיר יותר מחיפוש בצד השרת עבור מערכי נתונים קטנים ואינו דורש רשת. הגישה המשולבת יעילה יותר למסחר אלקטרוני: תגובה מיידית מהמטמון המקומי, רענון רקע דרך API.
Debounce וביטול בקשות מיושנות
ללא debounce, החיפוש שולח בקשה עבור כל תו שהוקלד. במהירות הקלדה של 3–5 תווים בשנייה — מדובר ב-3–5 קריאות רשת נוספות. התגובות מגיעות בסדר לא נכון, ורשימת ההצעות מרצדת. debounce של 300 אלפיות השנייה פותר את הבעיה: הבקשה נשלחת רק לאחר הפסקה בהקלדה.
// iOS: debounce через Combine
@Published var query = ""
cancellable = $query
.debounce(for: .milliseconds(300), scheduler: RunLoop.main)
.removeDuplicates()
.flatMap { [weak self] q in
self?.fetchSuggestions(q) ?? Empty().eraseToAnyPublisher()
}
.sink { [weak self] in
self?.suggestions = $0
}// Android: debounce через Flow + coroutines
searchFlow
.debounce(300)
.distinctUntilChanged()
.flatMapLatest { query ->
suggestionsUseCase(query)
}
.collect { suggestions = it }// iOS: debounce через Combine @Published var query = "" cancellable = $query .debounce(for: .milliseconds(300), scheduler: RunLoop.main) .removeDuplicates() .flatMap { [weak self] q in self?.fetchSuggestions(q) ?? Empty().eraseToAnyPublisher() } .sink { [weak self] in self?.suggestions = $0 } באנדרואיד והמקבילה שלו ב-iOS מבטלים אוטומטית את הבקשה המיושנת בכל קלט חדש, ללא ניהול ידני של טוקני ביטול.
שמירת הצעות חיפוש במטמון
תוצאות של שאילתות פופולריות נשמרות במטמון במכשיר. אנו משתמשים במטמון LRU עם 100–200 רשומות: בהקלדה חוזרת, התגובה מגיעה מיידית מהזיכרון, ללא קריאת API. חיסכון בתעבורה — בין 40% ל-70% עבור אפליקציות עם שאילתות חוזרות.
דוגמה למטמון LRU להצעות ב-Kotlin
private val cache = object : LinkedHashMap<String, List<String>>(200, 0.75f, true) {
override fun removeEldestEntry(eldest: Map.Entry<String, List<String>>) = size > 200
}
fun getSuggestions(query: String): List<String>? = cache[query.lowercase()]
fun putSuggestions(query: String, results: List<String>) {
cache[query.lowercase()] = results
}לגישה לא מקוונת, אנו מרחיבים את המטמון ל-Room FTS4 באנדרואיד או CoreData ב-iOS — המשתמש מקבל הצעות גם ללא רשת.
היסטוריית חיפוש
אנו שומרים את 10–15 השאילתות האחרונות באחסון מקומי. מציגים אותן עם אייקון שעון מעל הצעות ה-API, ומסירים כפילויות לפי טקסט. כפתור ניקוי היסטוריה הוא חובה: משתמשים מצפים לו.
| פלטפורמה | אחסון | מגבלה |
|---|---|---|
| iOS | UserDefaults | 15 רשומות |
| אנדרואיד | DataStore / SharedPreferences | 15 רשומות |
| React Native | AsyncStorage | 10 רשומות |
| Flutter | shared_preferences | 15 רשומות |
כאשר נבחרת הצעה מההיסטוריה, אנו שומרים את השאילתה שוב כדי לעדכן את הסדר, ואז מפעילים חיפוש מלא עבור הטקסט הנבחר.
הדגשת התאמות בתוצאות
אנו מפצלים את טקסט ההצעה לחלקים: הקטע התואם מודגש בצבע. באנדרואיד — // Android: debounce через Flow + coroutines searchFlow .debounce(300) .distinctUntilChanged() .flatMapLatest { query -> suggestionsUseCase(query) } .collect { suggestions = it } עם flatMapLatest, ב-iOS — private val cache = object : LinkedHashMap<String, List<String>>(200, 0.75f, true) { override fun removeEldestEntry(eldest: Map.Entry<String, List<String>>) = size > 200 } fun getSuggestions(query: String): List<String>? = cache[query.lowercase()] fun putSuggestions(query: String, results: List<String>) { cache[query.lowercase()] = results } , ב-Flutter — SpannableString עם ForegroundColorSpan. ההדגשה אינה תלוית רישיות ומתחשבת במספר מופעים בשורה אחת.
// iOS: подсветка совпадений через NSAttributedString
func highlight(_ text: String, query: String) -> NSAttributedString {
let attr = NSMutableAttributedString(string: text)
var searchRange = text.startIndex..<text.endIndex
while let range = text.range(of: query, options: .caseInsensitive, range: searchRange) {
attr.addAttribute(.foregroundColor, value: UIColor.systemBlue, range: NSRange(range, in: text))
searchRange = range.upperBound..<text.endIndex
}
return attr
}חשוב לטפל במחרוזת שאילתה ריקה: כשהשדה ריק, ההצעות לא מוצגות או שרק ההיסטוריה מוצגת.
מה כלול בפיתוח החיפוש?
אנו מבצעים את מחזור העבודה המלא במפתח פתוח:
- ניתוח ארכיטקטוני: בחירת גישה (צד הלקוח, צד השרת, משולב)
- יישום לוגיקת debounce וביטול בקשות
- שמירת הצעות חיפוש במטמון: LRU בזיכרון ושכבת אחסון קבועה
- היסטוריית חיפוש עם הסרת כפילויות וכפתור ניקוי
- הדגשת התאמות על רכיבים מקוריים
- טיפול במקרי קצה: שאילתה ריקה, מצב לא מקוון, שגיאות API
- בדיקות תחת חיבור איטי וללא רשת
- תיעוד ומסירת קוד מקור עם דוגמאות שימוש
אנו מעריכים את הפרויקט — שלחו לנו הודעה, ונחשב את העלות וציר הזמן.
מהניסיון שלנו
הלקוח שלנו — מרקטפלייס לחומרי בניין — התלונן על חיפוש איטי: תגובה של 1.5–2 שניות על כל תו. יישמנו גישה משולבת: fuse.js על מטמון לא מקוון עם 3,000 פריטים (SKU) בתוספת API לשאילתות לא סטנדרטיות. תוצאה: זמן תגובה ממוצע של 60 אלפיות השנייה, נטישת חיפוש ירדה ב-34%, וההזמנות שהושלמו גדלו.
בפרויקט אחר — אפליקציה רפואית ב-iOS ואנדרואיד — הוספנו היסטוריית חיפוש והדגשה. הזמן לבחירת תרופה קוצר מ-8 ל-4 נגיעות מסך.
הניסיון שלנו — מעל 50 פרויקטי מובייל שהושלמו, 6 שנים בפיתוח מקורי וקרוס-פלטפורמה. אנו מתחייבים לעמידה בזמנים ולאיכות קוד.
צירי זמן
| היקף | ציר זמן |
|---|---|
| חיפוש בסיסי: debounce + API + הצעות | 2–3 ימים |
| מורחב: היסטוריה + מטמון + הדגשה | 3–4 ימים |
| חבילה מלאה: FTS לא מקוון + RN/Flutter | 4–5 ימים |
העלות נקבעת לאחר ניתוח. השאירו פנייה — נחשב את ציר הזמן והעלות עבור הפרויקט שלכם.
ה-Apple UISearchController הסטנדרטי מכסה חיפוש בסיסי, אבל חיפוש אוטומטי מותאם אישית נותן לכם שליטה על אלגוריתם הדירוג, מצב לא מקוון ועיצוב ההצעות.