469,898 Members | 1,563 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,898 developers. It's quick & easy.

Autocomplete when adding new field

Hello,

I am trying to add a new field and when I do so, I want it to use an autocomplete function that I have created previously. At the moment, I am able to show a new field but when I start typing in the new field it is not performing the autocomplete function that I built.

Please provide me with any insight you might have.

Here is my code thus far. The php function for player names is at the top. Then there is the javascript autocomplete function. Then there is the javascript insert field script (this is the area where I am having trouble getting the autocomplete function to work), then there is the HTML:
Expand|Select|Wrap|Line Numbers
  1. <?
  2. $limit = 2000;
  3. $sql = sprintf( 'SELECT name, team, position, id FROM players LIMIT %d', $limit );
  4. $result = mysql_query( $sql );
  5. $players = array();
  6. while( $row = mysql_fetch_object( $result ) ){
  7.        $players[] = array(
  8.                           "id" => $row->id,
  9.                           "name" => $row->name . ", " . $row->team . ", " . $row->position .""
  10.                            );
  11.       }
  12. ?>
  13. <body>
  14. <script type="text/javascript">
  15. var playersArray = <?= json_encode ( $players ); ?>;
  16.       var playersNames = [];
  17.  
  18.       for(var i in playersArray){
  19.          playersNames.push(playersArray[i].name);
  20.       }
  21.  
  22.       function getIdByName(_name){
  23.           for(var i in playersArray){
  24.               if(_name == playersArray[i].name){
  25.                   return playersArray[i].id;
  26.               }
  27.           }
  28.       }
  29.  
  30.       function validate(){
  31.           document.getElementById("tags").value = getIdByName(document.getElementById("tags").value);
  32.           return ($('#stat').val() == '');
  33.       }
  34.  
  35.       $(document).ready(function(){
  36.           $("#tags").autocomplete({source: playersNames});
  37.       });
  38. </script>
  39. <script language="javascript">
  40. fields = 0;
  41. function addInput() {
  42. if (fields != 10) {
  43. document.getElementById('tags').innerHTML += "<input type='text' id='tags' name='p2' style='width:330px' value='<? $data['name']; ?>, <?= $data['team']; ?>, <?= $data['position']; ?>' /><br />";
  44. fields += 1;
  45. } else {
  46. document.getElementById('tags').innerHTML += "<br />Only 10 players per comparison allowed.";
  47. document.form.add.disabled=true;
  48. }
  49. }
  50. </script>
  51. <form name="form">
  52. <input type="button" onclick="addInput()" name="tags" value="Add input field" />
  53. </form>
  54. <div id="tags">
  55.  
  56. </div>
  57. </body>
  58.  
Oct 9 '10 #1
5 2052
acoder
16,027 Expert Mod 8TB
You need to add the autocomplete in addInput after you create the input fields.

Note that you've got duplicate IDs (tags) for both the field and the div container.
Oct 13 '10 #2
After which line of the code would I need to insert the autocomplete code again?
Oct 13 '10 #3
acoder
16,027 Expert Mod 8TB
After line 43. However, make the IDs unique so you can be sure that you're accessing the correct element. You can use the fields variable, e.g. "p"+fields and then change the autocomplete line appropriately.
Oct 13 '10 #4
Expand|Select|Wrap|Line Numbers
  1. <?
  2.  
  3. include 'index.php';
  4.  $limit = 2000;
  5.  $sql = sprintf( 'SELECT name, team, position, id FROM players LIMIT %d', $limit );
  6.  $result = mysql_query( $sql );
  7.  $players = array();
  8.  while( $row = mysql_fetch_object( $result ) ){
  9.         $players[] = array(
  10.                            "id" => $row->id,
  11.                            "name" => $row->name . ", " . $row->team . ", " . $row->position .""
  12.                             );
  13.        }
  14.  ?>
  15.  <body>
  16.  <script language="javascript">
  17.  fields = 0;
  18.  function addInput() {
  19.  if (fields != 10) {
  20.  document.getElementById('tags1').innerHTML += "<input type='text' id='tags1' name='p2' style='width:330px' value='<? $data['name']; ?>, <?= $data['team']; ?>, <?= $data['position']; ?>' /><br />";
  21.  var playersArray = <?= json_encode ( $players ); ?>;
  22.        var playersNames = [];
  23.  
  24.        for(var i in playersArray){
  25.           playersNames.push(playersArray[i].name);
  26.        }
  27.  
  28.        function getIdByName(_name){
  29.            for(var i in playersArray){
  30.                if(_name == playersArray[i].name){
  31.                    return playersArray[i].id;
  32.                }
  33.            }
  34.        }
  35.  
  36.        function validate(){
  37.            document.getElementById("tags1").value = getIdByName(document.getElementById("tags1").value);
  38.            return ($('#stat').val() == '');
  39.        }
  40.  
  41.        $(document).ready(function(){
  42.            $("#tags1").autocomplete({source: playersNames});
  43.        });
  44.  fields += 1;
  45.  } else {
  46.  document.getElementById('tags1').innerHTML += "<br />Only 10 players per comparison allowed.";
  47.  document.form.add.disabled=true;
  48.  }
  49.  }
  50.  </script>
  51.  <form name="form">
  52.  <input type="button" onclick="addInput()" name="multiple" value="Add input field" />
  53.  </form>
  54.  <div id="test">
  55.  
  56.  </div>
  57.  </body>
  58.  
Can you please verify that I have done the coding correctly above? I have tested it an when I click the Add input field the new text field does not appear. Thanks for your assistance.
Oct 13 '10 #5
acoder
16,027 Expert Mod 8TB
No, it was only supposed to be the one line that should have been moved or added:
Expand|Select|Wrap|Line Numbers
  1. $("#tags1").autocomplete({source: playersNames});
Also, if you've changed the ID of the div to "test", then line 43 in the original code should be:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("test")...
The reason why you have to change the IDs (besides it being invalid to have multiple elements with the same ID) is that when you add the autocomplete and you've used "#tags" as the ID, which element would it refer to when you have up to 10 input fields with the same ID?
So you'd have something like:
Expand|Select|Wrap|Line Numbers
  1. $("#tag"+fields).autocomplete({source: playersNames});
where each input field has ID "tag"+fields.
Oct 14 '10 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Tomek R. | last post: by
1 post views Thread by Sheryl Landon | last post: by
2 posts views Thread by Chris | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.