SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax.Autocompleter from script.aculo.us questions

    I have a couple places in my PHP app where I would love to replace long drop down menus with a text field that has some autocomplete help. I have tried it out and it works great, but I have two problems.

    First, is including the scriptaculous.js supposed to auto include the other files? I couldn't get my demo to work until I included the controls and effects files as well.

    Second, this is the down side of the text field vs the drop down I think. Let's say I want to pull up a list of users in the system. Now because the users are actually identified by a unique ID field instead of the string of First Name, Last Name the drop down was easy to set the value to the integer ID while the drop down read a nice string name.

    Is there some way for the text field in auto complete to show a string to the user, yet submit a different value tied to it (such as a int ID identifier) in the POST to the next page?

    Thanks for the ideas/help.
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."

  2. #2
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump everyone else use some other method of auto completion?
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."

  3. #3
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having trouble getting autocomplete to work myself.

    In regard to your problem, you could always have a hidden input field which contains the id, so with the autocomplete call, pass the index key to a javascript function which stores it in a hidden input field, then put the full name in the pretty box which the user sees?

  4. #4
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What problems are you having with the auto complete? I've gotten it to work and it's pretty nice.

    As to the hidden field, I don't think I could do that without performing an extra request since the autocomplete functions want a unordered list as the results of the ajax call.

    Thanks for the ideas though.
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."

  5. #5
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to figure out how to compose the server side response, but I can't figure out how the script is sending the request. Does anybody know how to do this? PHP would be preferable...

  6. #6
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jfredrickson
    I am trying to figure out how to compose the server side response, but I can't figure out how the script is sending the request. Does anybody know how to do this? PHP would be preferable...
    In my case it was using a $_POST parameter. My function call looked like so:
    Code:
    <script type="text/javascript">
    new Ajax.Autocompleter(
    	 'search',
    	 'autocompleterSearch',
    	 'backEndUrlGoesHere',
    	 { paramName: 'value', minChars: 2, afterUpdateElement: function() { document.searchform.submit(); } } );
    </script>
    Then the backed page checked for $_POST['value'] and used that to create the unordered list that is output as a return value.
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."

  7. #7
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you simply use return to send the data back to the autocompleter like you would in a regular function? I thought you would just echo the data onto the page and the autocompleter would read it off the page.

  8. #8
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jfredrickson
    So you simply use return to send the data back to the autocompleter like you would in a regular function? I thought you would just echo the data onto the page and the autocompleter would read it off the page.
    Sorry, I didn't mean literally use the return command. Yes, you merely output the results you would like to get back to the page.

    This is the exact code I was using:
    Code:
     $return = '<ul>';
     foreach ($list as $user) {
     	$return .= '<li>' . $user['FName'] . ' ' . $user['LName'] . '</li>';
     }
     $return .= '</ul>';
     print $return;
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."

  9. #9
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird, I am using the following code on my server page just to test it out, but it doesn't seem to do anything. It should just display the printed values as soon as the number of characters in the input field is more than 2 right?

    PHP Code:
    $return "<ul>
                    <li>your mom</li>
                    <li>yodel</li>
                </ul>"
    ;

    print 
    $return

  10. #10
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jfredrickson
    Weird, I am using the following code on my server page just to test it out, but it doesn't seem to do anything. It should just display the printed values as soon as the number of characters in the input field is more than 2 right?

    PHP Code:
    $return "<ul>
                     <li>your mom</li>
                     <li>yodel</li>
                 </ul>"
    ;
     
     print 
    $return
    in theory, but I would double check your response. If you're using firefox you can use firebug to check what the request/response actually looked like.
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."

  11. #11
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... I get the error: "Ajax is not defined" one line 54 (there are 53 lines in the document). Does that mean that I am missing something?

    Here is the test page I am working on: http://purusstudios.com/oschedule/test.php

    The server response page is here: http://purusstudios.com/oschedule/testdb.php

  12. #12
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jfredrickson
    Hmm... I get the error: "Ajax is not defined" one line 54 (there are 53 lines in the document). Does that mean that I am missing something?

    Here is the test page I am working on: http://purusstudios.com/oschedule/test.php

    The server response page is here: http://purusstudios.com/oschedule/testdb.php
    You're missing your form element man. You're instructing the code to "document.searchform.submit()" when there is no form named searchform.

    Here is my body for example
    Code:
    <body>
    <form name="searchform" method="post" action="<?php print $_SERVER['REQUEST_URI']; ?>">
    <input id="search" name="search" size="25" autocomplete="off" />
    <input type="submit" value="Search" name="subButton" />
    </form>
    <div id="autocompleterSearch" class="autocomplete"></div>
    <script type="text/javascript">
    new Ajax.Autocompleter(
    	 'search',
    	 'autocompleterSearch',
    	 'URLGOESHERE',
    	 { paramName: 'value', minChars: 2, afterUpdateElement: function() { document.searchform.submit(); } } );
    </script>
    </body>
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."

  13. #13
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... I tried your exact code, using the url 'testdb.php' and it still doesn't seem to work. Could it be something else that is messing it up?

  14. #14
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jfredrickson
    Hmm... I tried your exact code, using the url 'testdb.php' and it still doesn't seem to work. Could it be something else that is messing it up?
    Is your include paths to your JS files correct? The are pathed from the test.php file without getting prefixed with the /. I would double check that out.
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."

  15. #15
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I am a complete idiot. I hadn't uploaded the scriptaculous folder to the server. Sorry about dragging you through all of that...

    I really appreciate the help though. I think I understand how the whole thing works now.

  16. #16
    Can we go to a 48 hour day?
    Join Date
    May 2002
    Location
    MI
    Posts
    906
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jfredrickson
    Wow, I am a complete idiot. I hadn't uploaded the scriptaculous folder to the server. Sorry about dragging you through all of that...

    I really appreciate the help though. I think I understand how the whole thing works now.
    Nothing like debugging to force you to really get what the heck the code is doing ;-)

    I'm just sorry I didn't think to check that sooner. The whole Ajax is not defined should have made it obvious.

    Good luck with your project. The heading looks pretty nice.
    mitechie.com
    "Techies just think a little differently
    ...at least that is what they keep telling me."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •