Test: search company with jQuery

htdocs/core/class/html.form.class.php

@@ -556,22 +556,16 @@ class Form
                 print "\n".'<!-- Input text for third party with Ajax.Autocompleter (select_societes) -->'."\n";
                 print '<table class="nobordernopadding"><tr class="nocellnopadd">';
                 print '<td class="nobordernopadding">';
-                print ajax_autocompleter(($socid?$socid:-1),$htmlname,'socid',DOL_URL_ROOT.'/societe/ajaxcompanies.php?filter='.urlencode($filter), '');
-                print '<div class="ui-widget">';
                 if ($socid == 0)
                 {
-                    print '<input type="text" size="30" id="'.$htmlname.'" name="'.$htmlname.'" value="" />';
+                	print '<input type="text" size="30" id="'.$htmlname.'" name="'.$htmlname.'" value="" />';
                 }
                 else
                 {
                     print '<input type="text" size="30" id="'.$htmlname.'" name="'.$htmlname.'" value="'.$obj->nom.'" />';
                 }
-                print '</div>';
+                print ajax_autocompleter(($socid?$socid:-1),$htmlname,'socid',DOL_URL_ROOT.'/societe/ajaxcompanies.php?filter='.urlencode($filter), '');
-                //print ajax_autocompleter(($socid?$socid:-1),$htmlname,'socid',DOL_URL_ROOT.'/societe/ajaxcompanies.php?filter='.urlencode($filter), '');
                 print '</td>';
-                //print '<td class="nobordernopadding" align="left" width="16">';
-                //print ajax_indicator($htmlname,'working');  // Indicator is here
-                //print '</td>';
                 print '</tr>';
                 print '</table>';
             }

htdocs/lib/ajax.lib.php

@@ -90,24 +90,15 @@ function ajax_autocompleter($selected='',$htmlname,$value,$url,$indicator='worki
 	//$script.= '<div id="'.$htmlname.'" class="ui-widget"></div>';
 	$script.= '<script type="text/javascript">';
 	$script.= 'jQuery(document).ready(function() {
-    				jQuery("#'.$htmlname.'").autocomplete({
+    				jQuery("input#'.$htmlname.'").autocomplete({
     					source: function( request, response ) {
-    						jQuery.ajax({
+    						jQuery.get("'.$url.'", { socid: request.term }, function(data){
-    							url: "'.$url.'",
+								response( jQuery.map( data, function( item ) {
-    							dataType: "jsonp",
+									return { label: item.socname, value: item.socid	}
-    							data: {
+								}));
-    								socid: request.term
+							}, "json");
-								},
+						},
-								success: function( data ) {
+						dataType: "json",		
-									response( $.map( data.result, function( item ) {
-										return {
-											label: item.socname,
-											value: item.socid
-										}
-									}));
-								}
-							});
-						},		
     					minLength: 2,
     					select: function( event, ui ) {
     						jQuery("#'.$htmlname.'").val(ui.item.label);

htdocs/societe/ajaxcompanies.php

@@ -42,6 +42,7 @@ require('../main.inc.php');
 // Ajout directives pour resoudre bug IE
 //header('Cache-Control: Public, must-revalidate');
 //header('Pragma: public');
+header("Content-type: text/x-json");
 
 //top_htmlhead("", "", 1);  // Replaced with top_httphead. An ajax page does not need html header.
 top_httphead();
@@ -100,8 +101,8 @@ if (! empty($_POST['newcompany']) || ! empty($_GET['socid']) || ! empty($_POST['
 		}
 		print '</ul>';
 		*/
-	    $result = array('result' => $return_arr);
+	    
-	    echo json_encode($result);
+	    echo json_encode($return_arr);
 	}
 }
 else

htdocs/theme/eldy/style.css.php

@@ -1465,10 +1465,24 @@ table.cal_event td { border: 0px; padding-<?php print $left; ?>: 0px; padding-<?
 /*  Ajax - Liste deroulante de l'autocompletion                                   */
 /* ============================================================================== */
 
-.ui-autocomplete-loading {
-	background: white url(<?php echo DOL_URL_ROOT.'/theme/eldy/img/working.gif' ?>) right center no-repeat;
-	}
 
+.ui-autocomplete {}
+.ui-autocomplete-results { overflow: hidden; z-index: 99999; padding: 1px; position: absolute; }
+.ui-autocomplete-results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; }
+
+/* if  the width: 100%, a horizontal scrollbar will appear when scroll: true. */
+/* !important! if line-height is not set, or is set to a relative unit, scroll will be broken in firefox */
+.ui-autocomplete-results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; border-collapse: collapse; }
+.ui-autocomplete-results li.ui-autocomplete-even { background-color: #fff; }
+.ui-autocomplete-results li.ui-autocomplete-odd { background-color: #eee; }
+
+.ui-autocomplete-results li.ui-autocomplete-state-default { background-color: #fff; border: 1px solid #fff; color: #212121; }
+.ui-autocomplete-results li.ui-autocomplete-state-active { color: #000; background:#E6E6E6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x; border:1px solid #D3D3D3; }
+
+.ui-autocomplete-loading { background: white url(<?php echo DOL_URL_ROOT.'/theme/eldy/img/working.gif' ?>) right center no-repeat; }
+.ui-autocomplete-over { background-color: #0A246A; color: white; }
+
+/*
 div.autocomplete {
       position:absolute;
       width:250px;
@@ -1491,8 +1505,7 @@ div.autocomplete ul li {
       height:16px;
       cursor:pointer;
     }
-
+*/
-
 /* ============================================================================== */
 /*  Ajax - In place editor                                                        */
 /* ============================================================================== */