Input Feld Inhalt live übertragen

leex · 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.

Anzeige

Nanobyte · 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

leex · 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

Nanobyte · 14. August 2013

AW: Input Feld Inhalt live übertragen

Edit fiddle - JSFiddle

leex · 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.

Sonderk!nd · 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.

leex · 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 :/

Nanobyte · 16. 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>

theQuest · 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.

Murdoc · 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.

leex · 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.

Nanobyte · 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.

theQuest · 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.

Murdoc · 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.

theQuest · 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?

Murdoc · 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.

leex · 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?

terraNova · 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...).

leex · 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.

Murdoc · 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

leex · 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&uuml;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);
 }
}

Murdoc · 19. August 2013

AW: Input Feld Inhalt live übertragen

Weil ich Umlaute nicht per Regulären Ausdruck rauswerfe

leex · 19. August 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?

Murdoc · 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.

leex · 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:

$con = new mysqli($server, $user, $pw);
if(mysqli_connect_errno())
{
printf("Verbindung fehlgeschlagen: %s" . mysqli_connect_error());
exit();
} else {
//echo "Erfolgreich verbunden!!!<br>";
$con->select_db($db);

}

// Define Output HTML Formating

$html = '<div style="width: 261px; font-weight:bold; text-align:center; background: #FFAE4B; background-transparency: 0.6">';
$html .= '<h3>nameString</h3>';
$html .= '</div>';
$html .= '<div id="wukz-link"><div id="tooltip"><a class="iframe" href="urlString" title="Bitte nach Reservierung Fenster schließen und bei uns bestellen!"><b>Wunschkennzeichen jetzt reservieren</b></a></div></div>';

// Get Search
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
//__debug ( $_POST );
$search_string = $con->real_escape_string($search_string);
//$search_string = mysql_real_escape_string($search_string);

// Check Length More Than One Character
if (strlen($search_string)) {
// Build Query
$query = 'SELECT * FROM kennz_ort WHERE code LIKE "'.$search_string.'"';
//echo $query;

// Do Search
$result = $con->query($query);
while($results = $result->fetch_array()) {
$result_array[] = $results;
}

/*
$result = $db->Execute($query);
while( !$results->EOF) {
$result_array[] = $results->fields;
$result->MoveNext();
}
*/

// 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 = "<b style=\"font-size: 20px\">" . $result['landkreis'] . "</b>";
$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);
}
}
?>

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#search1').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "/plugins/itl_order_addons/hooks/itl_order_addons_search.php",
data: { query: query_value },
cache: false,
success: function(html){
$("div#results").html(html);
}
});
}return false;
}

$("input#search1").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));

// Set Search String
var search_string = $(this).val();

// Do Search
if (search_string == '') {
$("div#kein_ort").fadeIn("slow");
$('div#results').fadeOut("slow");
}else{
$("div#results").fadeIn("slow");
$("div#kein_ort").fadeOut("slow");
$('h4#results-text').fadeIn("slow");
$(this).data('timer', setTimeout(search, 100));
};
});

Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Nützliche Suchen

Input Feld Inhalt live übertragen

Videos zum Themenbereich