autocomplete script in bestehendes script einbinden

L

loc_ju

Mitglied
Hallo liebe Community,

ich komme mit Javascript noch nicht so ganz klar, aber ein Teil funktioniert schon.
Ich hab mir ein bestehendes Script ausgeliehen und das versucht um dropdown feld zu ergänzen das klappt, jetzt versuch ich schon seit 2 Tage vergeblich ein autocomplete script mit einzubinden. Das Script als einzelnes funktioniert, nur eben nicht in verbindung mit diesem Script. Wäre super wenn mir jemand helfen könnte.

hier der Auszug der nicht klappt.

//autocomplete versuch
var kurztesetAttribute("name", "kurztext"+objTBody.rows.length);
kurztext.setAttribute("id", "tags");
kurztext.setAttributext = document.createElement('input');
kurztext.("size", "30");
kurztext.setAttribute("class", "textfeld");

$(function autocomplete() {
var availableTags = [
<?php
include 'connect.inc.php';

$result=mysql_query("SELECT * FROM jw_vorlagen_pos");

while ($row=mysql_fetch_assoc($result)){

$artikel=$row['artikel'];
$id=$row['id'];

echo "\"$artikel\",";
}
?>
];
$( "#tags" ).autocomplete({
source: availableTags
});
});


hier der komplette Code

Code: 
<html>
<head>
	<link rel="stylesheet" href="../../_js/_jquery/jquery.ui.all.css">
	<script src="../../_js/_jquery/jquery-1.7.2.js"></script>
	<script src="../../_js/_jquery/jquery.ui.core.js"></script>
	<script src="../../_js/_jquery/jquery.ui.widget.js"></script>
	<script src="../../_js/_jquery/jquery.ui.position.js"></script>
	<script src="../../_js/_jquery/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../../_js/_jquery/demos.css">

       

<?php 

include("connect.inc.php");
$sql ="SELECT * FROM jw_einheit";
$result = mysql_query($sql) OR die(mysql_error());
$einheit = array();
while ($row = mysql_fetch_row($result))
{
  $einheit[] = $row[1];
  $einheit_id[] = $row[0];   
}
$size = sizeof($einheit);
      $geb = $einheit[0];
      for($i=1; $i<$size; $i++) 
      {
      $eh = $eh.", ".$einheit[$i];
      }

$size_einheit_id = sizeof($einheit_id);
      $einheit_size_id = $einheit_id[0];
      for($i2=1; $i2<$size_einheit_id; $i2++) 
      {
      $eh_id = $eh_id.", ".$einheit_id[$i2];
      }
     
     
?>

<style type="text/css"><!--
.button_add_del {cursor:pointer;}
--></style>
<script type="text/javascript">
 
function newRow(objSrc)
{           
    var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];
    if(typeof objSrc=="undefined")
        {
            var objTR = objTBody.insertRow(objTBody.rows.length);
            
        }
    else
        {
                var objHelpTR = objSrc.parentNode;
                while(objHelpTR && (objHelpTR.nodeName.toLowerCase()!="tr"))
                {
                        objHelpTR = objHelpTR.parentNode;
                    }
            if(!objHelpTR) return;
                var objTR = document.createElement("tr");
                objHelpTR.parentNode.insertBefore(objTR, objHelpTR); 
        }
  
         
 
        var pos = document.createElement('input');
            pos.setAttribute("type", "text");
            pos.setAttribute("name", "pos"+objTBody.rows.length);
            pos.setAttribute("id", "pos"+objTBody.rows.length);
            pos.setAttribute("size", "3");
            pos.setAttribute("class", "textfeld");
        var menge = document.createElement('input');
            menge.setAttribute("type", "text");
            menge.setAttribute("name", "menge_"+objTBody.rows.length);
            menge.setAttribute("id", "menge_"+objTBody.rows.length);
            menge.setAttribute("size", "2");
            menge.setAttribute("class", "textfeld");
            
       
       
       
      //dropdown liste 
        var einheit = document.createElement('select'); 
            einheit.id = 'einheit_'+objTBody.rows.length;
            einheit.name = 'einheit_'+objTBody.rows.length;
                  
        var tage = new Array ("<?php echo $eh; ?>")    
            size = "<?php echo $size;?>";
        var id = new Array ("<?php echo $eh_id; ?>")
        for (i=0; i<31; i++) {
        //array splitten
        var namen_array = "<?php echo $eh; ?>".split(", ");
        var id_array = "<?php echo $eh_id; ?>".split(", ");

          theOption=document.createElement("option");
          theText=document.createTextNode(namen_array[i]);
          theOption.appendChild(theText);
          theOption.setAttribute("id", "dropdown"+objTBody.rows.length)
          theOption.setAttribute("name", "dropdown"+objTBody.rows.length); 
          theOption.setAttribute("value",id_array[i]);
          einheit.appendChild(theOption); 

        }  
      
        
      //einzelpreis         
        var ep = document.createElement('input');
            ep.setAttribute("type", "text");
            ep.setAttribute("name", "einzelpreis_"+objTBody.rows.length);
            ep.setAttribute("id", "einzelpreis_"+objTBody.rows.length);
            ep.setAttribute("size", "6");
            ep.setAttribute("class", "textfeld");


       
    //autocomplete versuch
        var kurztesetAttribute("name", "kurztext"+objTBody.rows.length);
            kurztext.setAttribute("id", "tags");
            kurztext.setAttributext = document.createElement('input');
            kurztext.("size", "30");
            kurztext.setAttribute("class", "textfeld");


    var addrow_button = document.createElement('img');
        addrow_button.setAttribute("src", "image/add_above.png");
        addrow_button.setAttribute("title", "Neue Position darüber einfügen");
        addrow_button.setAttribute("onclick", "javascript:newRow(this);");
        addrow_button.setAttribute("height", "35");
        addrow_button.setAttribute("width", "35");
        addrow_button.setAttribute("border", "0");
        addrow_button.setAttribute("class", "button_add_del");
    var delrow_button = document.createElement('img');
        delrow_button.setAttribute("src", "image/del_above.png");
        delrow_button.setAttribute("title", "Diese Position entfernen");
        delrow_button.setAttribute("onclick", "javascript:removeRow(this);");
        delrow_button.setAttribute("height", "35");
        delrow_button.setAttribute("width", "35");
        delrow_button.setAttribute("border", "0");
        delrow_button.setAttribute("class", "button_add_del");
    var test_button = document.createElement('input');
        test_button.setAttribute("id", "test"+objTBody.rows.length);
        test_button.setAttribute("name", "test_zahl");
    var id_button = document.createElement('input');
            id_button.setAttribute("name", "anzahl");
            id_button.setAttribute("value", +objTBody.rows.length);
            id_button.setAttribute("size", "2");
    var nauf_button = document.createElement('img');
        nauf_button.setAttribute("src", "image/add_above.png");
        nauf_button.setAttribute("title", "Neue Position darüber einfügen");
        nauf_button.setAttribute("onclick", "javascript:nauf(zeile_[i]);");
        nauf_button.setAttribute("height", "35");
        nauf_button.setAttribute("width", "35");
        nauf_button.setAttribute("border", "0");
        nauf_button.setAttribute("class", "button_add_del");
    var runter_button = document.createElement('img');
        runter_button.setAttribute("src", "image/add_above.png");
        runter_button.setAttribute("title", "Neue Position darüber einfügen");
        runter_button.setAttribute("onclick", "javascript:nauf(zeile_'[i]');");
        runter_button.setAttribute("height", "35");
        runter_button.setAttribute("width", "35");
        runter_button.setAttribute("border", "0");
        runter_button.setAttribute("class", "button_add_del");
   
 
            
    var 
//ausgabe button hinzufügen und button löschen 
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(addrow_button);
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(delrow_button);
  
//ausgabe id zelle  
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(id_button);
 
//ausgabe Beschreibungstext
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(kurztext); 
  
    objTD = objTR.insertCell(objTR.cells.length);
//ausgabe Position
    //objTD.appendChild(pos);
//ausgabe Menge           
    objTD.appendChild(menge);
//ausgabe Einheit
    objTD.appendChild(einheit);
  
    objTD = objTR.insertCell(objTR.cells.length);
//ausgabe Einzelpreis
    objTD.appendChild(ep);
 
    objTD = objTR.insertCell(objTR.cells.length);

    objTD.appendChild(test_button);
 
    helga();
}

$(function autocomplete() {
    var availableTags = [
        <?php
        include 'connect.inc.php';

        $result=mysql_query("SELECT * FROM jw_vorlagen_pos");

        while ($row=mysql_fetch_assoc($result)){

        $artikel=$row['artikel'];
        $id=$row['id'];

        echo "\"$artikel\",";
        }
      ?>
    ];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
function removeRow(objSrc){ 
  var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];

  // Falls kein auslösendes Objekt übergeben wurde -> es wird die letzte Zeile entfernt
  if(typeof objSrc=="undefined"){
       
    // Falls mindestens eine Zeile existiert
    if(objTBody.rows.length > 0)
       objTBody.deleteRow(objTBody.rows.length-1);
      
       
  }else{    
    // Eltern-Tabellenzeile des auslösenden Elements ermitteln
    var objTR = objSrc.parentNode;
    // Solange es sich nicht um eine Tabellenzelle handelt
    while(objTR && (objTR.nodeName.toLowerCase()!="tr")){
      objTR = objTR.parentNode;
    }
    if(!objTR) return;    
    // Zeile aus Tabelle entfernen
    objTR.parentNode.removeChild(objTR);
  }
}


 
function helga()
{
    var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];
    for(var i=1; i<=objTBody.rows.length; i++)
        {
            document.getElementById("test"+i).value = "Nr.: "+i;
        }
}


 
//]]>
</script>
</head>
<body>

<form action="<?php $PHP_SELF ?>" method="post">   
  <?php
     
  if(isset($_POST['edit'])) { 
   
  }else{
?> 
<a href=# onclick="javascript:helga();">richtig Nummerieren</a><br><br>
<table id="dokument" border="1">
 
  <tbody></tbody>
</table>
  <img src="image/add.png" title="Neue Position hinzufügen" onClick="javascript:newRow();" height="35" width="35" border="0" class="button_add_del">
  <img src="image/del.png" title="Letzte Position entfernen" onClick="javascript:removeRow();" height="35" width="35" border="0" class="button_add_del">
<br><br>  


<input type="submit" value="edit">
</form>
    
   <?php 
        	foreach($_POST as $key => $value)
{
if($key != "send") //simuliert was alles übergeben wird
{ 

$split_key = explode("_", $key);
    $key_name = $split_key[0]; 
    $key_number = $split_key[1];

echo $key_name." ".$key_number." -> Wert ". $value."<br />"; 


}
}
  }?>
</body>
</html>
 
hab den Fehler selber gefunden. Es lag nur daran dass ich die Autocomplete function nicht in die erste Schleife mit eingebunden habe. Jetzt gehts, und wird auch in jeder neuen Zeile mit übernommen.

Anbei der richtige Code, thx 4 Help

Code: 
<html>
<head>
  <link rel="stylesheet" href="../../_js/_jquery/jquery.ui.all.css">
	<script src="../../_js/_jquery/jquery-1.7.2.js"></script>
	<script src="../../_js/_jquery/jquery.ui.core.js"></script>
	<script src="../../_js/_jquery/jquery.ui.widget.js"></script>
	<script src="../../_js/_jquery/jquery.ui.position.js"></script>
	<script src="../../_js/_jquery/jquery.ui.autocomplete.js"></script>
	<link rel="stylesheet" href="../../_js/_jquery/demos.css">

       

<?php 

include("connect.inc.php");
$sql ="SELECT * FROM jw_einheit";
$result = mysql_query($sql) OR die(mysql_error());
$einheit = array();
while ($row = mysql_fetch_row($result))
{
  $einheit[] = $row[1];
  $einheit_id[] = $row[0];   
}
$size = sizeof($einheit);
      $geb = $einheit[0];
      for($i=1; $i<$size; $i++) 
      {
      $eh = $eh.", ".$einheit[$i];
      }
 
$size_einheit_id = sizeof($einheit_id);
      $einheit_size_id = $einheit_id[0];
      for($i2=1; $i2<$size_einheit_id; $i2++) 
      {
      $eh_id = $eh_id.", ".$einheit_id[$i2];
      }
     
     
?>

<style type="text/css"><!--
.button_add_del {cursor:pointer;}
--></style>
<script type="text/javascript">
 
function newRow(objSrc)
{           
    var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];
    if(typeof objSrc=="undefined")
        {
            var objTR = objTBody.insertRow(objTBody.rows.length);
            
        }
    else
        {
                var objHelpTR = objSrc.parentNode;
                while(objHelpTR && (objHelpTR.nodeName.toLowerCase()!="tr"))
                {
                        objHelpTR = objHelpTR.parentNode;
                    }
            if(!objHelpTR) return;
                var objTR = document.createElement("tr");
                objHelpTR.parentNode.insertBefore(objTR, objHelpTR); 
        }
  
         
 
        var pos = document.createElement('input');
            pos.setAttribute("type", "text");
            pos.setAttribute("name", "pos"+objTBody.rows.length);
            pos.setAttribute("id", "pos"+objTBody.rows.length);
            pos.setAttribute("size", "3");
            pos.setAttribute("class", "textfeld");
        var menge = document.createElement('input');
            menge.setAttribute("type", "text");
            menge.setAttribute("name", "menge_"+objTBody.rows.length);
            menge.setAttribute("id", "menge_"+objTBody.rows.length);
            menge.setAttribute("size", "2");
            menge.setAttribute("class", "textfeld");
            
       
       
       
       
        var einheit = document.createElement('select'); 
            einheit.id = 'einheit_'+objTBody.rows.length;
            einheit.name = 'einheit_'+objTBody.rows.length;
                  
        var tage = new Array ("<?php echo $eh; ?>")    
            size = "<?php echo $size;?>";
        var id = new Array ("<?php echo $eh_id; ?>")
        for (i=0; i<31; i++) {
        //array splitten
        var namen_array = "<?php echo $eh; ?>".split(", ");
        var id_array = "<?php echo $eh_id; ?>".split(", ");
 
          theOption=document.createElement("option");
          theText=document.createTextNode(namen_array[i]);
          theOption.appendChild(theText);
          theOption.setAttribute("id", "dropdown"+objTBody.rows.length)
          theOption.setAttribute("name", "dropdown"+objTBody.rows.length); 
          theOption.setAttribute("value",id_array[i]);
          einheit.appendChild(theOption); 
 
        }  
      
        
          
            
        var ep = document.createElement('input');
            ep.setAttribute("type", "text");
            ep.setAttribute("name", "einzelpreis_"+objTBody.rows.length);
            ep.setAttribute("id", "einzelpreis_"+objTBody.rows.length);
            ep.setAttribute("size", "6");
            ep.setAttribute("class", "textfeld");


          //artikel Textfeld mit autocomplete
        var kurztext = document.createElement('input');
            kurztext.setAttribute("name", "kurztext"+objTBody.rows.length);
            kurztext.setAttribute("id", "tags"+objTBody.rows.length);
            kurztext.setAttribute("size", "30");
            kurztext.setAttribute("class", "textfeld");
    var addrow_button = document.createElement('img');
        addrow_button.setAttribute("src", "image/add_above.png");
        addrow_button.setAttribute("title", "Neue Position darüber einfügen");
        addrow_button.setAttribute("onclick", "javascript:newRow(this);");
        addrow_button.setAttribute("height", "35");
        addrow_button.setAttribute("width", "35");
        addrow_button.setAttribute("border", "0");
        addrow_button.setAttribute("class", "button_add_del");
    var delrow_button = document.createElement('img');
        delrow_button.setAttribute("src", "image/del_above.png");
        delrow_button.setAttribute("title", "Diese Position entfernen");
        delrow_button.setAttribute("onclick", "javascript:removeRow(this);");
        delrow_button.setAttribute("height", "35");
        delrow_button.setAttribute("width", "35");
        delrow_button.setAttribute("border", "0");
        delrow_button.setAttribute("class", "button_add_del");
    var test_button = document.createElement('input');
        test_button.setAttribute("id", "test"+objTBody.rows.length);
        test_button.setAttribute("name", "test_zahl");
    var id_button = document.createElement('input');
            id_button.setAttribute("name", "anzahl");
            id_button.setAttribute("value", +objTBody.rows.length);
            id_button.setAttribute("size", "2");
    var nauf_button = document.createElement('img');
        nauf_button.setAttribute("src", "image/add_above.png");
        nauf_button.setAttribute("title", "Neue Position darüber einfügen");
        nauf_button.setAttribute("onclick", "javascript:nauf(zeile_[i]);");
        nauf_button.setAttribute("height", "35");
        nauf_button.setAttribute("width", "35");
        nauf_button.setAttribute("border", "0");
        nauf_button.setAttribute("class", "button_add_del");
    var runter_button = document.createElement('img');
        runter_button.setAttribute("src", "image/add_above.png");
        runter_button.setAttribute("title", "Neue Position darüber einfügen");
        runter_button.setAttribute("onclick", "javascript:nauf(zeile_'[i]');");
        runter_button.setAttribute("height", "35");
        runter_button.setAttribute("width", "35");
        runter_button.setAttribute("border", "0");
        runter_button.setAttribute("class", "button_add_del");
   
 
            
    var 
//ausgabe button hinzufügen und button löschen 
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(addrow_button);
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(delrow_button);
  
//ausgabe id zelle  
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(id_button);
 
//ausgabe Beschreibungstext
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(kurztext); 
  
    objTD = objTR.insertCell(objTR.cells.length);
//ausgabe Position
    //objTD.appendChild(pos);
//ausgabe Menge           
    objTD.appendChild(menge);
//ausgabe Einheit
    objTD.appendChild(einheit);
  
    objTD = objTR.insertCell(objTR.cells.length);
//ausgabe Einzelpreis
    objTD.appendChild(ep);
 
    objTD = objTR.insertCell(objTR.cells.length);

    objTD.appendChild(test_button);
//test Buttons nauf runter
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(nauf_button);
    objTD = objTR.insertCell(objTR.cells.length);
    objTD.appendChild(runter_button);
 
    helga();

$(function autocomplete() {
    var availableTags = [
        <?php
        include 'connect.inc.php';

        $result=mysql_query("SELECT * FROM jw_vorlagen_pos");

        while ($row=mysql_fetch_assoc($result)){

        $artikel=$row['artikel'];
        $id=$row['id'];

        echo "\"$artikel\",";
        }
      ?>
    ];
		$( "#tags"+objTBody.rows.length).autocomplete({
			source: availableTags
		});
	});
}





function removeRow(objSrc){ 
  var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];

  // Falls kein auslösendes Objekt übergeben wurde -> es wird die letzte Zeile entfernt
  if(typeof objSrc=="undefined"){
       
    // Falls mindestens eine Zeile existiert
    if(objTBody.rows.length > 0)
       objTBody.deleteRow(objTBody.rows.length-1);
      
       
  }else{    
    // Eltern-Tabellenzeile des auslösenden Elements ermitteln
    var objTR = objSrc.parentNode;
    // Solange es sich nicht um eine Tabellenzelle handelt
    while(objTR && (objTR.nodeName.toLowerCase()!="tr")){
      objTR = objTR.parentNode;
    }
    if(!objTR) return;    
    // Zeile aus Tabelle entfernen
    objTR.parentNode.removeChild(objTR);
  }
}


 
function helga()
{
    var objTBody = document.getElementById("dokument").getElementsByTagName("tbody")[0];
    for(var i=1; i<=objTBody.rows.length; i++)
        {
            document.getElementById("test"+i).value = "Nr.: "+i;
        }
}


 
//]]>
</script>
</head>
<body>

<form action="<?php $PHP_SELF ?>" method="post">   
  <?php
     
  if(isset($_POST['edit'])) { 
   
  }else{
?> 
<a href=# onclick="javascript:helga();">richtig Nummerieren</a><br><br>
<table id="dokument" border="1">
 
  <tbody></tbody>
</table>
  <img src="image/add.png" title="Neue Position hinzufügen" onClick="javascript:newRow();" height="35" width="35" border="0" class="button_add_del">
  <img src="image/del.png" title="Letzte Position entfernen" onClick="javascript:removeRow();" height="35" width="35" border="0" class="button_add_del">
<br><br>  


<input type="submit" value="edit">
</form>
    
   <?php 
        	foreach($_POST as $key => $value)
{
if($key != "send") //Prevent the submit button's name and value from being inserted into the db
{ 

$split_key = explode("_", $key);
    $key_name = $split_key[0]; 
    $key_number = $split_key[1];

echo $key_name." ".$key_number." -> Wert ". $value."<br />"; 


}
}
  }?>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück