יצירת השלמה אוטומטית לרשימת ערים בישראל (mootools autocompleter)

1 בינואר 2009

אין תגובות


דוגמא ליצירת השלמה אוטומטית לרשימת ערים בישראל.


מה נצטרך?
1. רשימת ערים. (הכנתי אחת כזאת)
2. mootools ( מכאן )
3. autocompleter script ( מכאן ).


איך נתחיל?
1. נטען את רשימת הישובים לאפליקציה שלנו, כדי להימנע מקריאת הנתונים כל הזמן..
2. נכין פנקציית חיפוש לפי מחרוזת.
3. ניצור Generic handler שיחזיר לנו את התוצאה מהסרבר במבנה JSON.
4. נכין דף דוגמא.


יאללה מתחילים:
בהנחה שיש לנו רשימת ישובים (מצורף בפרויקט דוגמא), סתם שרירותי בחרתי בפורמט XML.
ניצור מחלקה שתחזיק לנו את רשימת הערים (ואח"כ נוסיף לה את החיפוש ברשימה)

public class Cities
{
private List<STRING> _citieslist;
public List<STRING>; CitiesList
{
get { return this._citieslist; }
}

private Cities()
{
this._citieslist = new List<STRING>;();
XmlDocument doc = new XmlDocument();
doc.Load(AppDomain.CurrentDomain.BaseDirectory + "Cities.xml");
XmlNodeList xCities = doc.GetElementsByTagName("City");
foreach (XmlNode node in xCities)
this._citieslist.Add( node.Attributes["Name"].Value );
}
}


יופי… עכשיו יש לנו את רשימת הערים באובייקט ליסט גנרי.. נוסיף למחלקה שלנו את יכולת החיפוש על הרשימה:

    private string _filter;
public List<string> CitiesListFiltered( string filter )
{
this._filter = filter;
List<string> results = this.CitiesList.FindAll( startWith );
if ( results.Count == 0 )
results = this.CitiesList.FindAll( contains );
if (results.Count == 0)
{
while (this._filter.Length > 0 && results.Count == 0)
{
this._filter = this._filter.Substring(0, this._filter.Length – 1);
results = this.CitiesList.FindAll(contains);
}
}
return results;
}

public bool contains(string obj)
{
return obj != null && obj.Contains(this._filter);
}
public bool startWith(string obj)
{
return obj != null && obj.StartsWith(this._filter);
}


בעצם יצרנו שלוש שלבים של חיפוש, הראשון הוא למצוא ערים שמתחילות במחרוזת שהתקבלה, כלומר: אם המשתמש הזין "יה" אנחנו נחפש ערים שמתחילות ב"יה" כדוגמת- "יהוד". במידה ואין לנו תוצאות, אנחנו נחפש ערים שמכילות את המחרוזת שהתקבלה כלומר: אם המשתמש יזין "יהודה" אנחנו נחזיר ערים שמכילות את המחרוזת כדוגמת- "אור יהודה", החיפוש השלישי קצת יותר מתוחכם, בהנחה שהמשתמש הזין "תל אביב יפו" היתה לנו תוצאה אחת, אבל אז הוא המשיך לרשום… אנחנו מקצצים כל פעם את התו האחרון ומחפשים שוב.


כדי למנוע טעינה חוזרת של הרשימה, אנחנו נשתמש במחלקה שלנו בתבנית Singleton כלומר מופע סטטי אחד לכולם (ע"י מימוש Singlton Factory).


אוקיי אז יש לנו מחלקה שמחזיקה רשימה ויש לה יכולות חיפוש לפי מחרוזת.. מה עכשיו?


אנחנו רוצים להחזיר את הנתונים שלנו בפורמט JSON… אז.. חיפשנו ערים לפי מחרוזת ויש לנו רשימה.. איך נבצע את ההמרה לJSON?
בFramework 3.5 זה מאוד פשוט.. הכל כבר מוכן.. נרחיב (באמצעות Extension Methods) את כל האובייקטים ונוסיף להם מתודה חדשה: ToJSON

// Extends object with ToJSON method.
public static class JsonHelper
{
public static string ToJSON(this object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(obj);
}
public static string ToJSON(this object obj, int Depth)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
serializer.RecursionLimit = Depth;
return serializer.Serialize(obj);
}
}

נכין את הGeneric Handler שלנו:

    public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/json";
context.Response.ContentType = "UTF-8";
context.Response.Clear();

string Result = "";

if (context.Request.Form["q"] != null )
{
string query = context.Request.Form["q"];
Result = Singleton<Cities>.Instance.CitiesListFiltered(query).ToJSON();
}
context.Response.Write(Result);
context.Response.End();
}


רגע.. מה עשינו??
יצרנו הנדלר פשוט שמקבל כמחרוזת QueryString בשם q את המחרוזת שברצוננו לחפש, ומחזיר רשימת ערים מתאימות בפורמט JSON.


 אז מה נשאר לנו? להכין דוגמא? קטן עלינו…
נתחיל בדף עצמו..

  	<div class="box">
<div class="item"><span class="caption">בחר עיר:</span></div>
<div class="item"><input type="text" id="txtCity" /></div>
<div class="item"><span class="caption">הבחירה שלך:</span></div>
<div class="item"><span id="selectedCity"></span></div>
</div>

 ה-Input ‏"txtCity" ישמש את הAutoCompleter שלנו וה-Span ‏"selectedCity" ישמש כדי להציג את הערך הנבחר..

נוסיף לדף את הקבצי JS שאנחנו צריכים:

    <script src="Scripts/mootools.js" type="text/javascript"></script>
<script src="Scripts/Observer.js" type="text/javascript"></script>
<script src="Scripts/Autocompleter.js" type="text/javascript"></script>
<script src="Scripts/Autocompleter.Local.js" type="text/javascript"></script>
<script src="Scripts/Autocompleter.Request.js" type="text/javascript"></script>

וניצור לנו קובץ פשוט (GetCity.js) שיוצר מופע למחלקת Javascript‏: AutoCompleter על הInput שיצרנו:

    new Autocompleter.Request.JSON('txtCity', 'GetCity.ashx', {
'postVar': 'q',
'delay': '50',
'selectFirst': 'true',
'onShow': function () {
$('selectedCity').set('html', ");
},
'onSelection' : function( elm, selected) {
$('selectedCity').set('html', selected.inputValue);
}
});

 


אני מקווה שהדוגמא עזרה למישהו, בעיקרון היא למתחילים.. בכל מקרה, דוגמא עובדת אפשר למצוא כאן.


בהצלחה.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *