חיקוי של AutoComplete של Ajax
אחרי דיון ארוך עם אחד מהקוראים (החביבים) והמגיבים הקבועים שלי (
עמירם) כתבתי את הדוגמא הבאה שהיא חיקוי (עלוב) של ה -
AutoComplete של Ajax.
הדוגמא מגיעה כדי להראות נכונות של הקוד, ומכאן אפשר לקחת את זה קדימה.
המטרה היא לעשות משהו דומה ל - AutoComplete ב - JavaScript שניגש ל - WebService.
את הדוגמא המלאה ניתן להוריד
מכאן.
(נ.ב. הדוגמא עובדת רק ב - IE מכיון שב - FF צריך לכתוב את הגישה לשירות בצורה שונה - ותודה
לברוך על ההערה)
אז ככה:
נתחיל ב - WebService
[ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string[] HelloWorld(string prefix)
{
string[] arr = new string[7];
for (int i = 0; i < 7; i++)
{
arr[i] = prefix + RandomString(4);
}
return arr;
}
// Download From: http://www.c-sharpcorner.com/UploadFile/mahesh/RandomNumber11232005010428AM/RandomNumber.aspx
Random random = new Random();
private string RandomString(int size)
{
StringBuilder builder = new StringBuilder();
char ch;
for (int i = 0; i < size; i++)
{
ch = Convert.ToChar(Convert.ToInt32(Math.Floor(26 * random.NextDouble() + 65)));
builder.Append(ch);
}
return builder.ToString().ToLower();
}
}
המתודה HelloWorld מקבלת פרמטר כלשהו עבור ה - prefix ואמורה להחזיר שבע תוצאות. (עבור הדוגמא השתמשתי עם מתודה נחמדה שמצאתי שיודעת לייצר מחרוזות אקראיות)
ה - html:
<input type="text" id="txt" onkeyup="GetData()" />
<select id='sp'
style="position: absolute;
top: 39px;
left: 13px;
width: 122px;
display:none"
onchange="Change()"
size="7" name="sp">
</select>
יש לנו תיבת טקסט שלאחר שמקלידים אות מפעילים מתודת JS שאמורה למלא את ה - select עם נתונים.
ויש לנו את ה - select שכברירת מחדל לא רואים אותו - ובזמן שיבחרו ערך כלשהו מתוכו, זה יפעיל את מתודת Change.
קוד ה - JS:
המתודה GetData תפקידה:
1. לקחת את הפרמטר מתיבת הטקסט.
2. ללכת לשרת לאחזר את הנתונים.
3. לנקות את הערכים הקודמים מתיבת הרשימה.
4. למלא את הערכים החדשים.
function GetData() {
var data = document.getElementById('txt').value;
var url = 'http://localhost:9999/WebService1.asmx/HelloWorld';
var result = GetSynchronousJSONResponse(url, '{prefix:"' + data + '"}');
result = eval('(' + result + ')');
RemoveFromSelect();
FillInSelect(result);
}
המתודה GetSynchronousJSONResponse יודעת לקבל כתובת ולגלוש לשם.
function GetSynchronousJSONResponse(url, postData) {
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//false means synchronous
xmlhttp.open("POST", url, false);
xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xmlhttp.send(postData);
var responseText = xmlhttp.responseText;
return responseText;
}
המתודה RemoveFromSelect מנקה את התוצאות הקודמות.
function RemoveFromSelect() {
var select = document.getElementById('sp');
select.style.display = 'block';
for (var i = select.options.length; i >= 0; i--) {
select.remove(i);
}
}
המתודה FillInSelect ממלאה התוך תיבת הרשימה את הערכים החדשים.
function FillInSelect(result) {
var select = document.getElementById('sp');
for (var i = 0; i < result.d.length; i++) {
var option = document.createElement("OPTION");
option.text = result.d[i];
option.value = i;
select.options.add(option);
}
}
ואחרון חביב, המתודה Change בוחרת את הערך שנבחר בתיבת הרשימה, שם אותו בתיבת הטקסט, ומעלים את תיבת הרשימה.
function Change() {
var select = document.getElementById('sp');
var data = document.getElementById('txt');
data.value = select.options[parseInt(select.value, 10)].text;
select.style.display = 'none';
}