#1 14. August 2013 Hey, gibt es die Möglichkeit mit jquery etc. den in ein input feld eingegebenen text live direkt darunter nochmal als text darstellen zu lassen, heist: in ein textfeld gibt man zb "test" ein. direkt darunter wird der eingebene text direkt nochmal angezeigt. + Multi-Zitat Zitieren
#2 14. August 2013 AW: Input Feld Inhalt live übertragen Code: // Wir cachen hier die beiden jQuery-Objekte aus Perfomance gründen var $deinInput = $('#dein-input-feld') var $deinZiel = $('#dein-ziel'); // Bei jedem "keydown" event nehmen wir den inhalt mit .val() // und packen ihn in das ziel mit .text() $('#dein-input').on('keydown',function(){ $deinZiel.text( $deinInput.val() ); }); http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text + Multi-Zitat Zitieren
#3 14. August 2013 AW: Input Feld Inhalt live übertragen hm bekomms nicht hin. kannst du es mir vielleicht hier mal reinschreiben Create a new fiddle - JSFiddle + Multi-Zitat Zitieren
#4 14. August 2013 AW: Input Feld Inhalt live übertragen Edit fiddle - JSFiddle + Multi-Zitat Zitieren
#5 16. August 2013 AW: Input Feld Inhalt live übertragen funktioniert. danke. hast du vielleicht auch noch eine funktion (code) mit dem ich das eingegebene in einer Datenbank gleichzeitig suchen kann? also ich geb zb.: M ein und es soll aus der Daten Bank der Datensatz München geholt werden (Kennzeichen) und angezeigt werden das es münchen ist. + Multi-Zitat Zitieren
#6 16. August 2013 AW: Input Feld Inhalt live übertragen du musst nur erweitern oder ebend ne Liste draus machen wie auch immer. zB eine Liste mit allen Kennzeichen die dann ein M enthalten etc. + Multi-Zitat Zitieren
#7 16. August 2013 AW: Input Feld Inhalt live übertragen ok danke versuch ich mal ... jetzt hab ich schon wieder ein neues problem habe folgenden code: Code: <?php header("Content-type: image/png"); if (isset($_GET["input"])) { $string = $_GET["input"]; } else { $string = "test"; } $im = imagecreatefrompng("images/kennzeichen-leer.png"); $orange = imagecolorallocate($im, 255, 210, 60); $px = (imagesx($im) - 7.5 * strlen($string)) / 2; imagestring($im, 3, $px, 9, $string, $orange); imagepng($im); imagedestroy($im); ?> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $('#input').on('keydown input', function () { var singleValues = $("#input").val(); $.ajax({ url: "test.php", type: "GET", data: {input: singleValues}, async: false, }); $("p").html("<b>Single:</b> " + singleValues); } }); </script> </head> <body> <input type="text" id="input" placeholder="Start typing" autofocus /> <?php if (isset($_GET["input"])) { include test.php; } else { } ?> </body> </html> ich möchte das nun live das bild erzeugt wird mit meinem eingegebenen text. sollte so funktionieren. nur bekomm ich das mit der variable direkt an php übergeben nicht hin :/ + Multi-Zitat Zitieren
#8 16. August 2013 Zuletzt bearbeitet: 17. August 2013 AW: Input Feld Inhalt live übertragen Mit imagePng schickst du den Binary-Code vom Bild direkt an den Browser, daher musst du beides in einzelne Dateien packen. image.php PHP: <? php header ( "Content-type: image/png" );if (isset( $_GET [ "input" ])){ $string = $_GET [ "input" ];} else { $string = "test" ;} $im = imagecreatefrompng ( "images/kennzeichen-leer.png" ); $orange = imagecolorallocate ( $im , 255 , 210 , 60 ); $px = ( imagesx ( $im ) - 7.5 * strlen ( $string )) / 2 ; imagestring ( $im , 3 , $px , 9 , $string , $orange ); imagepng ( $im ); imagedestroy ( $im ); Bei jedem Tastendruck wir das Attribute "src" vom #image neu gesetzt. (Bei jedem Tastendruck ist nicht empfehlenswert, besser wäre es wenn das Script wartet bis eine schreibpause eingelegt wird oder ein Button gedrückt) index.php Code: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $('#input').on('keydown input', function () { var singleValues = $("#input").val(); $("p").html("<b>Single:</b> " + singleValues); $('#image').attr( 'src','image.php?input='+ singleValues ); }); </script> </head> <body> <input type="text" id="input" placeholder="Start typing" autofocus /> <img id="image" src="image.php?input=test"> </body> </html> + Multi-Zitat Zitieren
#9 17. August 2013 AW: Input Feld Inhalt live übertragen Es freut mich, wenn du so viel Spaß hast, jedoch wollte ich dich auf den Umstand hinweisen, dass PHP nicht unbedingt die beste Sprache ist, um eine solche Datenbanklifesuche zu realisieren. Eventuell schaust du dir mal Node.js an. 1 Person gefällt das. + Multi-Zitat Zitieren
#10 17. August 2013 AW: Input Feld Inhalt live übertragen Erzähle ihm doch keinen Blödsinn ... Neben PHP eignen sich viele Sprachen, Flaschenhals bleibt dennoch die Datenbank. 1 Person gefällt das. + Multi-Zitat Zitieren
#11 17. August 2013 AW: Input Feld Inhalt live übertragen danke für die antworten. @nano bei mir funktioniert der code nicht. es wird kein bild angezeigt wenn ich etwas ein tippe. irgedetwas scheint zu fehlen. aber hab kein fehler gefunden. + Multi-Zitat Zitieren
#12 17. August 2013 AW: Input Feld Inhalt live übertragen Dann scheinst du nicht in die Konsole deines Browsers geguckt zu haben, dort steht der Fehler nämlich. Habe den Code in meinem Beitrag korrigiert. + Multi-Zitat Zitieren
#13 18. August 2013 AW: Input Feld Inhalt live übertragen Wenn du mit jedem neuen Buchstaben gleich eine neue Verbindung aufbaust ja. Wenn du aber die Datenbank auf direkten (direkteren) Weg anzapfst, sollte es dort kein Problem geben. Kommt natürlich auch auf das Design der DB an. Aber selbst MySQL _kann_ sehr schnell sein. + Multi-Zitat Zitieren
#14 18. August 2013 Zuletzt bearbeitet: 18. August 2013 AW: Input Feld Inhalt live übertragen NodeJS zapft Datenbanken auch nicht <direkter> an als z.b. PHP. Ich denke du willst auf NodeJS HTTP-Server raus oder? Das geht auch mit PHP & Co. (Vielleicht nicht ganz so einfach, aber hey ...) Doch selbst ohne den externen Webserver-Overhead (ich nenn' es mal so) ist eine Anfrage pro Buchstabe utopisch. Der Server würde recht schnell in die Knie gehen wenn mehrere Benutzer gleichzeitig pro Wort X Anfragen an den Server absetzen. Ich denke da sind wir uns einig. 1 Person gefällt das. + Multi-Zitat Zitieren
#15 18. August 2013 AW: Input Feld Inhalt live übertragen Ja Auf jeden Fall. Bei solchen Geschichten müssen die Daten im Cache vorgehalten werden. Natürlich wird das für 90% aller Projekte keinen Unterschied machen, weil dort einfach zu wenige Anfragen auflaufen. OT: putc? Warum nicht mehr murdoc.eu? + Multi-Zitat Zitieren
#16 18. August 2013 Zuletzt bearbeitet: 18. August 2013 AW: Input Feld Inhalt live übertragen Aus privaten Gründen --- Mal eben kurz was implementiert. Nur ein Gedankengang: Code: let input = document.querySelector('#input'), delay = 5000, last = 0, cache = { term: '', data: null }; input.addEventListener('keydown', function(e) { let value = this.value, vlen = value.length, clen = cache.term.length // wenn value mehr als 5 buchstaben länger/kürzer ist als cache.term // oder wenn die überschnedenden buchstaben aus cache.term und value ungleich sind: if (Math.abs(vlen - clen) >= 5 || value.substr(0, clen) !== cache.term) { cache.term = value; query(value, show); return; } show(); }); function query(value, cb) { var now = +new Date, xhr; if (last !== 0 && last + delay < now) return cb(); last = now; xhr = new XMLHttpRequest('GET', 'query.php?q=' + encodeURIComponent(value), true); let json = false; try { xhr.responseType = 'json'; json = true; } catch (e) {} xhr.addEventListener('load', function() { cache.data = json ? this.response : JSON.parse(this.responseText); cb(); }); xhr.send(); } function show() { if (cache.data !== null) { // cache.data anzeigen } } Code: eingabe: m anfrage: query.php?q=m eingabe: mü keine anfrage eingabe: mün keine anfrage eingabe: münc keine anfrage eingabe: münch keine anfrage eingabe: münche anfrage: query.php?q=münche ... eingabe: münch keine anfrage eingabe: münc keine anfrage eingabe: mün keine anfrage eingabe: müns anfrage: query.php?q=müns Zwischen den Anfragen ist immer min. ein 5 Sekunden delay. + Multi-Zitat Zitieren
#17 18. August 2013 AW: Input Feld Inhalt live übertragen danke. das mit dem bild erzeugen funktioniert. aber das mit der datenbankabfrage habe ich noch nicht verstanden. wo genau werden die daten aus der datenbank geholt? + Multi-Zitat Zitieren
#18 18. August 2013 AW: Input Feld Inhalt live übertragen Der Query wird über einen HTTP Request mittels JS weitergereicht, ausgeführt, ausgewertet und dann entsprechend zurückgegeben um mit den Daten zu arbeiten. In murdocs Fall in query.php (Siehe query(..): xhr = XMLHTTPRequest...). 1 Person gefällt das. + Multi-Zitat Zitieren
#19 19. August 2013 AW: Input Feld Inhalt live übertragen danke für die hilfe erstmal. bw´s sind raus. habe es jetzt anderst gelöst. hab noch eine live suche im internet gefunden, jedoch hab ich das problem, dass wenn ich umlaute eingebe diese nicht in der datenbank gefunden werden. wie kann ich das umgehen Kennzeichensuche einfach mal münchen versuchen. findet er nicht. alle ohne schon. + Multi-Zitat Zitieren
#20 19. August 2013 AW: Input Feld Inhalt live übertragen Ich hab mal so eine Suche umgesetzt: Ajax Suche query.php: PHP: <? php header ( 'Content-Type: application/json; Charset=UTF-8' ); if (empty( $_GET [ 'q' ])) exit( '["Kein Fund"]' ); $dummy = [ 'München' , 'Münchsmünster' , 'Sachsen' , 'Sachsen Anhalt' ]; $qry = trim ( $_GET [ 'q' ]); $res = []; $len = strlen ( $qry ); foreach ( $dummy as $term ) if ( strncasecmp ( $term , $qry , $len ) === 0 ) $res [] = $term ; exit( json_encode ( $res )); Rest ist ersichtlich 1 Person gefällt das. + Multi-Zitat Zitieren
#21 19. August 2013 AW: Input Feld Inhalt live übertragen und bei dir funkionieren die umlaute jetzt warum?! wegen dem eingefügten header?! meine sieht so aus: Code: /************************************************ Search Functionality ************************************************/ // Define Output HTML Formating $html = ''; $html .= '<li class="result">'; $html .= '<a target="_blank" href="urlString">'; $html .= '<h3>nameString</h3>'; $html .= '<h4>functionString</h4>'; $html .= '</a>'; $html .= '</li>'; // Get Search $search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']); $search_string = $con->real_escape_string($search_string); // Check Length More Than One Character if (strlen($search_string) >= 3 && $search_string !== ' ') { // Build Query $query = 'SELECT * FROM kennz_ort WHERE landkreis LIKE "%'.$search_string.'%"'; // Do Search $result = $con->query($query); while($results = $result->fetch_array()) { $result_array[] = $results; } // Check If We Have Results if (isset($result_array)) { foreach ($result_array as $result) { // Format Output Strings And Hightlight Matches $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>"."<div style=\"text-transform:capitalize;\">".$search_string."</div></b>", "Kennzeichen-Kürzel: ".$result['code']); $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>","<div style=\"text-transform:capitalize;\">". $result['landkreis']."</div>"); $display_url = $result['link']; // Insert Name $output = str_replace('nameString', $display_name, $html); // Insert Function $output = str_replace('functionString', $display_function, $output); // Insert URL $output = str_replace('urlString', $display_url, $output); // Output echo($output); } }else{ // Format No Results Output $output = str_replace('urlString', 'javascript:void(0);', $html); $output = str_replace('nameString', '<b>Keine Ergebnisse.</b>', $output); $output = str_replace('functionString', 'Sorry :(', $output); // Output echo($output); } } + Multi-Zitat Zitieren
#22 19. August 2013 AW: Input Feld Inhalt live übertragen Weil ich Umlaute nicht per Regulären Ausdruck rauswerfe + Multi-Zitat Zitieren
#23 19. August 2013 Zuletzt bearbeitet: 29. September 2013 AW: Input Feld Inhalt live übertragen ähm ok. mal googles was es damit so auf sich hat ... danke hab das mit den regulären ausdrücken nicht auf die kette gebracht. wie muss ich das denn umschreiben, dass es geht? + Multi-Zitat Zitieren
#24 29. September 2013 AW: Input Feld Inhalt live übertragen Code: $search_string = $_POST['query']; Da du darunter ja "real_escape_string" verwendest sollte das reichen. + Multi-Zitat Zitieren
#25 29. September 2013 AW: Input Feld Inhalt live übertragen wenn ich das so mache funktioniert meine suche nicht mehr. kompletter code sieht grad so aus: + Multi-Zitat Zitieren