Autocomplete when adding new field

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • BaseballGraphs
    New Member
    • Sep 2010
    • 75
    #1

    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:
    Code:
    <?
$limit = 2000;
$sql = sprintf( 'SELECT name, team, position, id FROM players LIMIT %d', $limit );
$result = mysql_query( $sql );
$players = array();
while( $row = mysql_fetch_object( $result ) ){
       $players[] = array(
                          "id" => $row->id,
                          "name" => $row->name . ", " . $row->team . ", " . $row->position .""
                           );
      }
?>
<body>
<script type="text/javascript">
var playersArray = <?= json_encode ( $players ); ?>;
      var playersNames = [];

      for(var i in playersArray){
         playersNames.push(playersArray[i].name);
      }

      function getIdByName(_name){
          for(var i in playersArray){
              if(_name == playersArray[i].name){
                  return playersArray[i].id;
              }
          }
      }

      function validate(){
          document.getElementById("tags").value = getIdByName(document.getElementById("tags").value);
          return ($('#stat').val() == '');
      }

      $(document).ready(function(){
          $("#tags").autocomplete({source: playersNames});
      });
</script>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('tags').innerHTML += "<input type='text' id='tags' name='p2' style='width:330px' value='<? $data['name']; ?>, <?= $data['team']; ?>, <?= $data['position']; ?>' /><br />";
fields += 1;
} else {
document.getElementById('tags').innerHTML += "<br />Only 10 players per comparison allowed.";
document.form.add.disabled=true;
}
}
</script>
<form name="form">
<input type="button" onclick="addInput()" name="tags" value="Add input field" />
</form>
<div id="tags">

</div>
</body>
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      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.

        Comment

        • BaseballGraphs
          New Member
          • Sep 2010
          • 75
          #3
          After which line of the code would I need to insert the autocomplete code again?

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              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.

                Comment

                • BaseballGraphs
                  New Member
                  • Sep 2010
                  • 75
                  #5
                  Code:
                  <?

include 'index.php';
 $limit = 2000;
 $sql = sprintf( 'SELECT name, team, position, id FROM players LIMIT %d', $limit );
 $result = mysql_query( $sql );
 $players = array();
 while( $row = mysql_fetch_object( $result ) ){
        $players[] = array(
                           "id" => $row->id,
                           "name" => $row->name . ", " . $row->team . ", " . $row->position .""
                            );
       }
 ?>
 <body>
 <script language="javascript">
 fields = 0;
 function addInput() {
 if (fields != 10) {
 document.getElementById('tags1').innerHTML += "<input type='text' id='tags1' name='p2' style='width:330px' value='<? $data['name']; ?>, <?= $data['team']; ?>, <?= $data['position']; ?>' /><br />";
 var playersArray = <?= json_encode ( $players ); ?>;
       var playersNames = [];

       for(var i in playersArray){
          playersNames.push(playersArray[i].name);
       }

       function getIdByName(_name){
           for(var i in playersArray){
               if(_name == playersArray[i].name){
                   return playersArray[i].id;
               }
           }
       }

       function validate(){
           document.getElementById("tags1").value = getIdByName(document.getElementById("tags1").value);
           return ($('#stat').val() == '');
       }

       $(document).ready(function(){
           $("#tags1").autocomplete({source: playersNames});
       });
 fields += 1;
 } else {
 document.getElementById('tags1').innerHTML += "<br />Only 10 players per comparison allowed.";
 document.form.add.disabled=true;
 }
 }
 </script>
 <form name="form">
 <input type="button" onclick="addInput()" name="multiple" value="Add input field" />
 </form>
 <div id="test">

 </div>
 </body>
                  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.

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      No, it was only supposed to be the one line that should have been moved or added:
                      Code:
                      $("#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:
                      Code:
                      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:
                      Code:
                      $("#tag"+fields).autocomplete({source: playersNames});
                      where each input field has ID "tag"+field s.

                        Comment

                        Previous template Next
                        Working...