{"id":1156,"date":"2018-05-04T17:37:31","date_gmt":"2018-05-04T15:37:31","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1156"},"modified":"2018-05-04T17:37:31","modified_gmt":"2018-05-04T15:37:31","slug":"html5-datalist-value-ganz-so-einfach-ist-es-nicht","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/05\/04\/html5-datalist-value-ganz-so-einfach-ist-es-nicht\/","title":{"rendered":"HTML5 Datalist Value &#8211; ganz so einfach ist es nicht"},"content":{"rendered":"<p>Eigentlich gibt es in HTML ja die Option, einem Dropdownfeld zus\u00e4tzlich zur Bezeichnung einen Value mitzugeben, der dann bei der Auswahl weitergegeben wird. In meinem Fall w\u00e4re die Bezeichnung der Titel des Rezeptes, und der Value die ID aus der Datenbank. Das w\u00fcrde dann etwa so aussehen:<\/p>\n<pre>...\r\n&lt;option value = '345'&gt;Dampfnudeln wie bei Oma&lt;\/option&gt;\"\r\n...<\/pre>\n<p>Sobald der Benutzer den Eintrag Dampfnudeln ausgew\u00e4hlt und auf Return gedr\u00fcckt hat, wird der Wert 345 \u00fcbergeben &#8211; sollte zumindest. Diese Option funktioniert aber bei einer Datalist browserabh\u00e4ngig ganz unterschiedlich, w\u00e4re ja zu einfach.<\/p>\n<h2>In Chrome<\/h2>\n<p>&#8230;kriege ich die numerischen IDs in der Auswahlliste mit angezeigt, das ist nicht besonders sch\u00f6n, funktioniert aber wenigstens.<\/p>\n<div id=\"attachment_1157\" style=\"width: 580px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-1157\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1157\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/05\/chrome_value.jpg\" alt=\"chrome_value\" width=\"570\" height=\"355\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/05\/chrome_value.jpg 570w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/05\/chrome_value-300x187.jpg 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><p id=\"caption-attachment-1157\" class=\"wp-caption-text\">chrome_value<\/p><\/div>\n<p>Es wird auch richtig bei der Auswahl die ID weitergegeben.<\/p>\n<h2>In Firefox Quantum<\/h2>\n<p>wird der Value-Wert einfach ignoriert, ich bekomme nur die Titel angezeigt und bei der Auswahl ausgegeben.<\/p>\n<div id=\"attachment_1158\" style=\"width: 448px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-1158\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1158\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/05\/firefox_value.jpg\" alt=\"firefox_value\" width=\"438\" height=\"177\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/05\/firefox_value.jpg 438w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2018\/05\/firefox_value-300x121.jpg 300w\" sizes=\"(max-width: 438px) 100vw, 438px\" \/><p id=\"caption-attachment-1158\" class=\"wp-caption-text\">firefox_value<\/p><\/div>\n<h2>Im Internet Explorer 10<\/h2>\n<p>wirds besonders g&#8217;schmackig, da kann man gar nicht mehr nach dem Titel ausw\u00e4hlen, der Autocomplete funktioniert erst wieder, wenn ich den Option Value ganz herausnehme.<\/p>\n<h2>Was nun? Ich mach mal kurzen Proze\u00df<\/h2>\n<p>Bevor ich mir hier f\u00fcr die unterschiedlichen Varianten der einzelnen Browserausgaben einen Wolf programmiere, verzichte ich ganz auf die \u00dcbergabe der ID und suche meine Rezepte schlicht nach dem Titel aus der Datenbank. Das kann ich mir erlauben, weil a) ich nur ein-eindeutige Titel habe und b) die Schreibweise aus dem Dropdownfeld identisch ist mit der Schreibweise in der wp_posts. Falls der User dann noch zus\u00e4tzliche Zeichen eingibt (woran ihn nieman hindert) wird halt kein Rezept gefunden, aber damit kann ich leben. Um c) auszuschliessen, dass Revisions oder attachments mit reinrutschen, erweitere ich meinen Select einfach um <strong>post_type like &#8218;post&#8216; and post_status like &#8218;publish&#8216;<\/strong>, aber das reicht dann.<\/p>\n<p>Das Ganze klemme ich in eine if(isset($_POST)&#8230;Abfrage und packe es in den Shortcode f\u00fcr das Formular mit rein, das sieht dann so aus:<\/p>\n<pre>\/\/*********Formular als Shortcode einbinden\r\n\u00a0function asuche(){ \r\n\u00a0\u00a0 \u00a0echo \"&lt;form action='#' method='post'&gt;\";\r\n\u00a0\u00a0 \u00a0echo \"&lt;input type = 'text' name = 'ausgesucht' size = '100' id = 'textfeld' autocomplete = 'off' onkeyup = 'myFunction(this.value);' list = 'suchliste'&gt;\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"&lt;datalist id='suchliste'&gt;\";\r\n\u00a0\u00a0 \u00a0echo \"&lt;div id = 'liste'&gt;\";\r\n\u00a0\u00a0 \u00a0echo \"&lt;\/div&gt;\";\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"&lt;\/datalist&gt;\";\r\n\u00a0\u00a0 \u00a0echo \"&lt;\/form&gt;\";\r\n\u00a0\u00a0 <span style=\"color: #008000;\">\u00a0 <span style=\"color: #ff0000;\">if (isset($_POST['ausgesucht'])){<\/span><\/span><span style=\"color: #ff0000;\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \r\n\u00a0\u00a0 \u00a0\/*********Action*\/\u00a0\u00a0 \u00a0 \r\n\u00a0\u00a0 \u00a0global $wpdb;\r\n\u00a0\u00a0 \u00a0$alleposts = $wpdb-&gt;get_results( \"SELECT * from \".$wpdb-&gt;prefix.\"posts \r\nwhere post_title like '\".$_POST['ausgesucht'].\"'\r\n and post_status like 'publish' and post_type like 'post'\");\r\n\u00a0\u00a0 \u00a0foreach($alleposts as $einpost){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"&lt;h1&gt;\".$einpost-&gt;post_title.\"&lt;\/h1&gt;\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo $einpost-&gt;post_content;\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\/*********End Action*\/\r\n\u00a0\u00a0 \u00a0}<\/span>\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0}\r\n\u00a0add_shortcode('asuche', 'asuche');<\/pre>\n<p>Damit wird folgende Funktionalit\u00e4t realisiert: der User kann aus der Autocomplete-Liste einen Eintrag ausw\u00e4hlen und mit Return in das Textfeld \u00fcbernehmen. Bei nochmaligem Dr\u00fccken von Return wird der komplette Text des ausgew\u00e4hlten Rezeptes angezeigt. Das ist mir sch\u00f6n genug, und eing\u00e4ngig in der Bedienung.<\/p>\n<p>Nur der Internet-Explorer macht noch Zicken, der schl\u00e4gt beharrlich nur Rezepte vor, die mit dem eingegebenen Suchbegriff anfangen, nicht alle in denen der Begriff irgendwo im Titeltext vorkommt. Sei es drum, in Chrome und Firefox funktioniert es jedenfalls wie beabsichtigt.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eigentlich gibt es in HTML ja die Option, einem Dropdownfeld zus\u00e4tzlich zur Bezeichnung einen Value mitzugeben, der dann bei der Auswahl weitergegeben wird. In meinem Fall w\u00e4re die Bezeichnung der Titel des Rezeptes, und der Value die ID aus der Datenbank. Das w\u00fcrde dann etwa so aussehen: &#8230; &lt;option value = &#8218;345&#8216;&gt;Dampfnudeln wie bei Oma&lt;\/option&gt;&#8220; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[46,11,4,8],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1156"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=1156"}],"version-history":[{"count":4,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1156\/revisions"}],"predecessor-version":[{"id":1162,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1156\/revisions\/1162"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}