Jquery| autocomplete בAJAX

[איציק ברבי]

PHP קוד:

$("input.fullname").change(function(){
        $.ajax({
            url: "Sources/Ajax.php?act=User_List",
            type: "POST",
            data: "fullname="+$(this).val(),
            success: function(callback){
                Tags = callback.split(',');
            }
        });
        $( "#tags" ).autocomplete({
            source: Tags
        });
        return false;
    }); 


הסתובבתי באינטרנט בשביל לחפש מידע ובניתי את הקוד הזה..
עכשיו הוא לא עובד, קישרתי את הספרייה של autocomplete אשמח אם משהו יוכל לתקן לי את הקוד..
תודה!

[perfeito]

מה שקרה זה ככה:
אמרת ל jQuery לכי תביאי לי tags
ובינתיים תעשי autocomplete על #tags

מה שהיית צריך לעשות זה:
להביא את הטאגס ואחר כך לעשות autocomplete על הטאגס

בגלל זה javascript תמיד תהיה שפה יותר טובה מ php היא מריצה פקודות לא אחד אחרי השני
אלא בכאילו parallel

קוד צריך להיראות ככה.

$("input.fullname").change(function(){
  $.ajax({
      url: "Sources/Ajax.php?act=User_List",
      type: "POST",
      data: "fullname="+$(this).val(),
      success: function(data){
        $( "#tags" ).autocomplete({
          source: data.split(',')
        });
      }
  });
  return false;
});

[perfeito]

נכתב במקור על ידי perfeito

מה שקרה זה ככה:
אמרת ל jQuery לכי תביאי לי tags
ובינתיים תעשי autocomplete על #tags

מה שהיית צריך לעשות זה:
להביא את הטאגס ואחר כך לעשות autocomplete על הטאגס

בגלל זה javascript תמיד תהיה שפה יותר טובה מ php היא מריצה פקודות לא אחד אחרי השני
אלא בכאילו parallel

קוד צריך להיראות ככה.

$("input.fullname").change(function(){
  $.ajax({
      url: "Sources/Ajax.php?act=User_List",
      type: "POST",
      data: "fullname="+$(this).val(),
      success: function(data){
        $( "#tags" ).autocomplete({
          source: data.split(',')
        });
      }
  });
  return false;
});

בקיצור בקוד שלך כשהרצת autocomplete
Tags עדיין לא הגיע....

[איציק ברבי]

זה היה נסיון אחד ל... אשמח אם תתקן לי את הקוד.

[perfeito]

מה לא עובד אחי ?
למה לא לעשות ב keyup ? במקום change תעשה console.log() במקומות שונים ותברר מה קורה..

[איציק ברבי]

סידרתי את הקוד, הוא עובד אבל די לאט עלה לי רעיון לבטל את כל הבקשות של הAJAX שנשלחו איך אני עושה את זה? די הסתבכתי..

PHP קוד:

$("input.fullname").keyup(function(){
        $.ajax({
            url: "Sources/Ajax.php?act=User_List",
            type: "POST",
            data: "fullname="+$(this).val(),
            success: function(callback){
                availableTags = callback.split(',');
                $("input.fullname").autocomplete({
                    source: availableTags
                });
            }
        });
        return false;
    }); 


[IgalSt]

נכתב במקור על ידי איציק ברבי

סידרתי את הקוד, הוא עובד אבל די לאט עלה לי רעיון לבטל את כל הבקשות של הAJAX שנשלחו איך אני עושה את זה? די הסתבכתי..

PHP קוד:

$("input.fullname").keyup(function(){
        $.ajax({
            url: "Sources/Ajax.php?act=User_List",
            type: "POST",
            data: "fullname="+$(this).val(),
            success: function(callback){
                availableTags = callback.split(',');
                $("input.fullname").autocomplete({
                    source: availableTags
                });
            }
        });
        return false;
    }); 


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

תיקנתי לך את הקוד המקורי שלך.
http://jsfiddle.net/C2sRR/3/

אני ממליץ לך להסתכל על הדוגמה הזאת בדוקומנטציה (אומנם מדובר ב-JSONP, אך העקרון זהה).
שים לב שייתכן מאוד שתצטרך למפות את הנתונים שאתה מקבל באחרי קריאת ה-AJAX שלך לאובייקט JS ש-autocomplete מצפה לקבל ממך.

בנוסף אני ממליץ לעיין בדוגמה עם cache, כך שזה אמור להאיץ משמעותית את הביצועים שכן אתה לא תבצע קריאות AJAX מרובות, אלא לרוב רק פעם אחת.
לדוגמה אם אתה מחליט לבצע קריאת AJAX אחרי שהיוזר הזין 2 אותיות, אז יחזרו לך תוצאות. כשהוא יוסיף אות נוספת, אתה תעשה את הסינון מתוך התוצאות שחזרו לך לפני כן (כשהוא לך רק 2 אותיות). במקרה כזה בוודאי שאין צורך לקריאה נוספת שכן אם התוצאה נמצאת ב-DB, היא אחת מהתוצאות שכבר חזרו לך לפני כן.

[Itay]

נכתב במקור על ידי IgalSt

בנוסף אני ממליץ לעיין בדוגמה עם cache, כך שזה אמור להאיץ משמעותית את הביצועים שכן אתה לא תבצע קריאות AJAX מרובות, אלא לרוב רק פעם אחת.
לדוגמה אם אתה מחליט לבצע קריאת AJAX אחרי שהיוזר הזין 2 אותיות, אז יחזרו לך תוצאות. כשהוא יוסיף אות נוספת, אתה תעשה את הסינון מתוך התוצאות שחזרו לך לפני כן (כשהוא לך רק 2 אותיות). במקרה כזה בוודאי שאין צורך לקריאה נוספת שכן אם התוצאה נמצאת ב-DB, היא אחת מהתוצאות שכבר חזרו לך לפני כן.

cache זה תמיד טוב, אבל צריך לזכור שכנראה יוצגו לא יותר מ-10 תוצאות ב-autocomplete
במקרים של-2 אותיות הראשונות יש נגיד 1000 התאמות, ויחזרו רק 10, הסיכויים די גדולים שהאות הבאה לא תהיה ב-cache
כמובן שאפשר לשמור את כל ה-1000 תוצאות ולהציג את ה-10 הראשונות, אבל אז כבר סתם טענת יותר מידי מידע, כשהרבה בקשות כאלו מהרבה משתמשים כבר סתם יעמיסו על השרת

[IgalSt]

נכתב במקור על ידי Itay

cache זה תמיד טוב, אבל צריך לזכור שכנראה יוצגו לא יותר מ-10 תוצאות ב-autocomplete
במקרים של-2 אותיות הראשונות יש נגיד 1000 התאמות, ויחזרו רק 10, הסיכויים די גדולים שהאות הבאה לא תהיה ב-cache
כמובן שאפשר לשמור את כל ה-1000 תוצאות ולהציג את ה-10 הראשונות, אבל אז כבר סתם טענת יותר מידי מידע, כשהרבה בקשות כאלו מהרבה משתמשים כבר סתם יעמיסו על השרת

הנושא שאתה מעלה אכן נכון בהחלט.
עם זאת, בהחלט שכל מקרה לגופו. לפעמים תעדיף לטעון יותר מידע ולהציג רק חלק ממנו (אחרי הכל לבצע שאילתה אחת 10 פעמים זה יותר כבד מאשר שאילתה אחת שמחזירה פי 10 רשומות).
לחילופין, תוכל להגדיר כל מיני התחכמויות כמו לדוגמה לבצע חיפוש ראשוני אחרי 2 תווים, לאחר מכן כשהיוזר מקליד תווים נוספים תבצע חיפוש ב-cache. במקביל, אחרי כל תו שמוכנס, תראה אם היוזר ממשיך להקליד או לא. אם הוא הפסיק (טיימר פשוט, של נגיד 500ms), תבצע קריאה נוספת לשרת לקבלת כל הרשומות.
בצורה כזאת אתה מגיע לחווית משתמש חיובית - היוזר מרגיש הוא מבצע חיפוש מאוד מהיר ומקבל פידבק מיידי על כל תו שהוא מכניס. מבחינת יעילות אתה חוסך בגישות ל-DB.

זה רק תסריט אחד בלבד. באמת שכל מקרה לגופו. אולי דווקא האיטיות במקרה הספציפי איציק ברבי מציג נובעת בכלל ממחסור של אינדקסים נאותים ב-DB, או בכלל פעולות איטיות ב-backend.

[Kernel]

אם כבר מדברים על אופטימזציה,
אם יש דפוס מסויים שחוזר על עצמו. למה לא להשתמש בקאש בbackend ולחסוך קריאות למסד.

יותר מזה, POST איטי יותר מ-GET:
ב-POST הדפדפן שולח קודם כל את ה-headers ורק אח״כ את ה-data, ב-GET ה-data הוא חלק מה-header (כן, זה מאוד משפיע ב-autocomplete).