Loading ...
Sorry, an error occurred while loading the content.

Autocomplete question

Expand Messages
  • Ricardo Barrios
    Hi all. I m very new with YUI and json, i m developing an aplication, and i want to use autocomplete widget, but i can t make it work. Im using Django as
    Message 1 of 7 , Oct 4, 2006
    View Source
    • 0 Attachment
      Hi all.

      I'm very new with YUI and json, i'm developing an aplication, and i want
      to use autocomplete widget, but i can't make it work. Im using Django as
      backend and here is my code:


      [ JAVASCRIPT CODE ]
      var myServer = "/operacion/cliente_lookup/";
      var mySchema = ;
      var DataSource = new YAHOO.widget.DS_XHR(myServer, mySchema);
      AutoComp = new YAHOO.widget.AutoComplete(field,container,DataSource);
      [ END JAVASCRIPT CODE ]

      [ DJANGO VIEW ]
      from django.utils import simplejson
      ...
      class JsonResponse(HttpResponse):
      def __init__(self, obj):
      self.original_obj = obj
      HttpResponse.__init__(self, self.serialize())
      self["Content-Type"] = "text/javascript"

      def serialize(self):
      return(simplejson.dumps(self.original_obj))

      def json_lookup(request, queryset, field, limit=10,
      login_required=False):
      if login_required and not request.user.is_authenticated():
      return redirect_to_login(request.path)
      obj_list = []
      lookup = {
      '%s__icontains' % field: request.GET['query'],
      }
      for obj in queryset.filter(**lookup)[:limit]:
      obj_list.append([getattr(obj, field), obj.id])
      return JsonResponse(obj_list)
      [ END DJANGO VIEW ]

      My problem is that i can't understand very well how schema is created,
      and how json is formatted.

      If someone could help me please?
    • Ricardo Barrios
      Ok, i answer myself :P If someone have the same problem my code is the following, and it works :) [ JAVASCRIPT ] var myServer = /operacion/cliente_lookup/ ;
      Message 2 of 7 , Oct 5, 2006
      View Source
      • 0 Attachment
        Ok, i answer myself :P

        If someone have the same problem my code is the following, and it
        works :)

        [ JAVASCRIPT ]
        var myServer = "/operacion/cliente_lookup/";
        var mySchema = ["ResultSet.Result","id","name"];
        var DataSource = new YAHOO.widget.DS_XHR(myServer, mySchema);
        AutoComp = new YAHOO.widget.AutoComplete(field,container,DataSource);
        [ END JAVASCRIPT ]

        [ DJANGO CODE ]
        def json_lookup(request, queryset, field, limit=10):
        obj_list = []
        lookup = { '%s__icontains' % field: request.GET['query'],}
        for obj in queryset.filter(**lookup)[:limit]:
        obj_list.append({"id": obj.id, "name": getattr(obj, field)})
        object = {"ResultSet": { "total": str(limit), "Result": obj_list } }
        return HttpResponse(simplejson.dumps(object),
        mimetype='application/javascript')
        [ END DJANGO CODE ]

        It's very simple, but Googling a bit i've made it work. :)

        El mié, 04-10-2006 a las 12:52 +0100, Ricardo Barrios escribió:
        > Hi all.
        >
        > I'm very new with YUI and json, i'm developing an aplication, and i
        > want
        > to use autocomplete widget, but i can't make it work. Im using Django
        > as
        > backend and here is my code:
        >
        > [ JAVASCRIPT CODE ]
        > var myServer = "/operacion/cliente_lookup/";
        > var mySchema = ;
        > var DataSource = new YAHOO.widget.DS_XHR(myServer, mySchema);
        > AutoComp = new YAHOO.widget.AutoComplete(field,container,DataSource);
        > [ END JAVASCRIPT CODE ]
        >
        > [ DJANGO VIEW ]
        > from django.utils import simplejson
        > ....
        > class JsonResponse(HttpResponse):
        > def __init__(self, obj):
        > self.original_obj = obj
        > HttpResponse.__init__(self, self.serialize())
        > self["Content-Type"] = "text/javascript"
        >
        > def serialize(self):
        > return(simplejson.dumps(self.original_obj))
        >
        > def json_lookup(request, queryset, field, limit=10,
        > login_required=False):
        > if login_required and not request.user.is_authenticated():
        > return redirect_to_login(request.path)
        > obj_list = []
        > lookup = {
        > '%s__icontains' % field: request.GET['query'],
        > }
        > for obj in queryset.filter(**lookup)[:limit]:
        > obj_list.append([getattr(obj, field), obj.id])
        > return JsonResponse(obj_list)
        > [ END DJANGO VIEW ]
        >
        > My problem is that i can't understand very well how schema is created,
        > and how json is formatted.
        >
        > If someone could help me please?
        >
        >
        >
        >
        >
      • safder_meah
        Hello everyone, I am a newbi in the world of Yahoo UI library and AJAX, and I am trying to use the autocomplete feature. I am done with most of the
        Message 3 of 7 , Nov 8, 2006
        View Source
        • 0 Attachment
          Hello everyone,

          I am a newbi in the world of Yahoo UI library and AJAX, and I am
          trying to use the autocomplete feature. I am done with most of the
          implementation except for one detail of it. Here's my problem
          definition. I have two text fields, one for country and other for
          state. Now, there's an autocomplete feature implemented for the
          country text field which works fine. Now for the state, I'd want to
          show the states for the country entered in the country text field. I
          am not sure how'd I implement this. Here's what my initial attempt
          looked like:

          CountryStateLookup = function() {
          var myArray;
          var myDataSource;
          var myAutoComp;


          return {

          init: function() {

          var myServer = "./autocomplete";
          var mySchema = ["country"];


          var myDataSource = new YAHOO.widget.DS_XHR(myServer, mySchema);

          myDataSource.responseType = myDataSource.TYPE_XML;
          myDataSource.scriptQueryParam = "id";
          myDataSource.scriptQueryAppend = "action=countryLookup";

          var myAutoComp = new
          YAHOO.widget.AutoComplete("DETAIL_COUNTRY_TEXT","countrycontainer",
          myDataSource);
          myAutoComp.queryDelay = 0;
          myAutoComp.prehighlightClassName = "yui-ac-prehighlight";
          myAutoComp.typeAhead = true;
          myAutoComp.useShadow = true;
          myAutoComp.formatResult = function(oResultItem, sQuery) {
          var sMarkup = oResultItem[1] + " " + oResultItem[2];
          return (sMarkup);
          };
          ////////////////////////////////

          var myStateSchema = ["state"];

          var myStateDataSource = new YAHOO.widget.DS_XHR(myServer, myColorSchema);

          myStateDataSource .responseType = myColorDataSource.TYPE_XML;
          myStateDataSource.scriptQueryParam = "id";
          myStateDataSource.scriptQueryAppend = "action=stateLookup&empName=" +
          document.forms[0].DETAIL_COUNTRY_TEXT.value;

          var myStateAutoComp = new
          YAHOO.widget.AutoComplete("state","statecontainer", myColorDataSource);
          myStateAutoComp.queryDelay = 0;
          myStateAutoComp.prehighlightClassName = "yui-ac-prehighlight";
          myStateAutoComp.typeAhead = true;
          myStateAutoComp.useShadow = true;
          //myAutoComp.itemSelectEvent.subscribe(myColorHandler);
          myStateAutoComp.formatResult = function(oResultItem, sQuery) {
          var sMarkup = oResultItem[0] ; return (sMarkup);
          };

          }

          };

          }();
          YAHOO.util.Event.addListener(this,'load',CountryStateLookup .init);

          <html>
          <head>
          <title>GCI: Country Select</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

          </head>
          <body class="small tenPxPageMargins">
          <form name="countryForm" id="countryForm" method="POST" action="main">
          <table border="0" cellpadding="5" cellspacing="0">
          <tr>
          <td><span class="labelLeft required">Country:</span> </td>
          <td>
          <input type="text"
          size="20"
          id="DETAIL_COUNTRY_TEXT"
          name="DETAIL_COUNTRY_TEXT">
          <div id="countrycontainer"></div>

          </td>
          </tr>
          <tr>
          <td><span class="labelLeft required">Color:</span> </td>
          <td>
          <input type="text"
          size="20"
          id="state"
          name="state">
          <div id="statecontainer"></div>

          </td>
          </tr>
          <tr><td id="auto-row" colspan="2"> <td/></tr>
          </table>
          </body>
          </html>

          I am trying to send the value of the country text field, so I need
          some pointers as to how to move forward. Thanks a lot.
        • Giovanni Battista Lenoci
          Hi, I m working on this example: http://developer.yahoo.com/yui/examples/autocomplete/ysearch_flat.html I ve succesfuly inserted the autocomplete in my web
          Message 4 of 7 , Mar 5, 2007
          View Source
          • 0 Attachment
            Hi, I'm working on this example:

            http://developer.yahoo.com/yui/examples/autocomplete/ysearch_flat.html

            I've succesfuly inserted the autocomplete in my web site, but now I want
            that after the choice from the dropdown is called a function.

            How can I achieve this?

            Thank you

            --
            gianiaz.net
            di Giovanni Battista Lenoci
            P.le Bertacchi 66
            23100 Sondrio - Italy
            cell. +39.392.7096936
            cell. +39.347.7196482
          • Eric Miraglia
            Giovanni, You should use the itemSelectEvent: myFunction(type, args) { //this function will fire when an item is selected //args[1] is your args array
            Message 5 of 7 , Mar 5, 2007
            View Source
            • 0 Attachment
              Giovanni,

              You should use the itemSelectEvent:

              myFunction(type, args) {
              //this function will fire when an item is selected
              //args[1] is your args array
              //args[1][0] is your autocomplete instance
              //args[1][1] is the <li> element from the selected item
              //args[1][2] is the item's data object or array
              };
              myAutoCompleteInstance.itemSelectEvent.subscribe(myFunction);

              Regards,
              Eric


              ______________________________________________
              Eric Miraglia
              Yahoo! User Interface Library



              On Mar 5, 2007, at 4:36 AM, Giovanni Battista Lenoci wrote:

              Hi, I'm working on this example:

              http://developer. yahoo.com/ yui/examples/ autocomplete/ ysearch_flat. html

              I've succesfuly inserted the autocomplete in my web site, but now I want
              that after the choice from the dropdown is called a function.

              How can I achieve this?

              Thank you

              --
              gianiaz.net
              di Giovanni Battista Lenoci
              P.le Bertacchi 66
              23100 Sondrio - Italy
              cell. +39.392.7096936
              cell. +39.347.7196482

              <gianiaz.vcf>

            • Giovanni Battista Lenoci
              ... Thank you very much! ... -- gianiaz.net di Giovanni Battista Lenoci P.le Bertacchi 66 23100 Sondrio cell. +39.392.7096936 cell. +39.347.7196482
              Message 6 of 7 , Mar 5, 2007
              View Source
              • 0 Attachment
                Eric Miraglia ha scritto:
                > Giovanni,
                >
                > You should use the itemSelectEvent:
                >
                > myFunction(type, args) {
                > //this function will fire when an item is selected
                > //args[1] is your args array
                > //args[1][0] is your autocomplete instance
                > //args[1][1] is the <li> element from the selected item
                > //args[1][2] is the item's data object or array
                > };
                > myAutoCompleteInstance.itemSelectEvent.subscribe(myFunction);
                >
                > Regards,
                > Eric
                >
                >
                Thank you very much!

                :-)

                --
                gianiaz.net
                di Giovanni Battista Lenoci
                P.le Bertacchi 66
                23100 Sondrio
                cell. +39.392.7096936
                cell. +39.347.7196482
              • mtorres253
                Hi all, I m using the YUI autocomplete to search through a JS array. Each element in the array contains multiple words and I want them all subject to the
                Message 7 of 7 , Aug 22, 2008
                View Source
                • 0 Attachment
                  Hi all,

                  I'm using the YUI autocomplete to search through a JS array. Each element in the array
                  contains multiple words and I want them all subject to the query. But, I only want results
                  where the query string matches the beginning of the word.

                  For example:

                  if the query is "do"

                  I *do not* want it to match "Aikido Class"

                  I *do* want it to match "Chiropractic Doctor"

                  Is there a way to handle this by manipulating the sQuery, or by accessing and parsing the
                  aResults *before* they get populated into the list?

                  Thanks!

                  Michael
                Your message has been successfully submitted and would be delivered to recipients shortly.