jQuery UI Autocomplete highlight

Mamy sobie prosty formularz. Do podpowiedzi użyjemy pluginu jquery autocomplite. Chcemy również dodać wyboldowanie podpowiedzi.
Dokładnie uzyskać taki efekt „meble, Waszawa” gdzie highlight jest zmianą koloru na czarny i wyboldowaniem.

<form id="search" action="/" method="GET" role="search">
    <fieldset>
        <input id="query" type="text" name="query" value="" maxlength="255" autocomplete="off" placeholder="Produkt, usługa, miasto, ulica">
        <button type="submit" id="button-search"></button>
    </fieldset>
</form>

A teraz trochę js 😉

$("#query").autocomplete({
        'minLength': 2,
        'delay': 0,
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var re = new RegExp("^" + this.term, "i") ;
                var t = item.label.replace(re,"<span class='highlight'>" + this.term + "</span>");

                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append(t)
                    .appendTo( ul );
            };
        },
        source: function (request, response) {
            //escapeRegex - /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&"
            var re = $.ui.autocomplete.escapeRegex(request.term);
            var matcher = new RegExp("^" + re, "i");

            $.getJSON("/autocomplete/?what=" + encodeURIComponent(request.term), function (searchWord) {
                var match = $.grep(searchWord, function (item, index) {
                    return matcher.test(item);
                });
                response(match);
            });
        },
        open: function (e, ui) {
            //autocomplete przesuwamy o 1px to góry, aby pozbyć się ramki
            $(".ui-autocomplete:visible").css({top: "-=1"});
        }
    });

A tak wygląda wynik naszej pracy.

autosuggest

Gulp.js – menadżer zadań

Gulp.js jest menadżerem zadań opartym na node, w skrócie mamy kilka czynności do zrobienia w projekcie. I żeby nie robić tego ręcznie gulp wykonuje za nas te operacje.
Oprę się na małym projekcie, chcę less zamienić na css, skopiować do foldera css, zminimalizować i zmienić jego nazwę na style.min.css

1. Instalacja

Do tego oczywiście potrzebny najpierw jest zainstalowany node, jak już jest zainstalowany to instalujemy gulp.

// najpierw instalujemy globalnie – zainstaluje się w folderze C:\Users\Uzytkownik\AppData\Roaming\npm\node_modules\gulp

npm install -g gulp

// następnie instalujemy lokalnie w moim wypadku wchodzimy do D:\xampp\htdocs\test-gulp i tam instalujemy gulp jak i pluginy

npm install gulp --save-dev

Teraz aby móc z gulp skorzystać należy utworzyć plik konfiguracyjny gulpfile.js – musi być on umieszczony w katalogu głównym naszego projektu.

W naszym projekcie będziemy korzystać z gulp-less, gulp-minify-css oraz gulp-rename możemy je zainstalować pojedynczo jak i za jednym razem jak kto woli.

// wszystko instalujemy lokalnie

npm install gulp-less gulp-minify-css gulp-rename install --save-dev

Struktura naszego projektu:
mamy folder „test-gulp” w nim foldery css oraz less, w less jest plik style.less 🙂
W test-gulp znajduje się plik gulpfile.js (nasze taski) oraz package.json (plik generujemy automatycznie lub ręcznie 😉 – zawiera on dependencies itd.)

test-gulp/
|  css/
|  less/
|  |  style.less
gulpfile.js -- ad3
package.json -- ad2

2. Tworzymy package.json

Aby utworzyć package.json należy w konsoli lokalnie uruchomić npm init

Pojawi się nam coś takiego:

———————–
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install –save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (test-gulp)
———————–

Naciskamy enter do pojawienia się „Is this ok? (yes)
wpisujemy y + enter

i mamy w naszym projekcie package.json

3. Konfiguracja gulpfile.js

/**
 * umieszczamy nasze pakiety które nam są potrzebne do projektu
 */

var gulp        = require('gulp'),
    less        = require('gulp-less'),  // less -> css
    minifyCSS   = require('gulp-minify-css'),  // css -> minify css
    rename      = require('gulp-rename');  // zmiana style.css na style.min.css


/**
 * tworzymy task (zadanie) wszystkie pliki less
 * zamieniamy na css
 * z css usuwamy br, nowe linie itd. czyli poczciwe minify
 * style.css zmieniamy nazwę na style.min.css
 */

gulp.task('less', function() {
    return gulp.src('less/*.less')
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('css')); // miejsce docelowe pliku css
});

/**
 * Watch Files For Changes - czyli obserwator zmian? (dziwnie to brzmi po polsku :))
 */

gulp.task('watch', function() {
    gulp.watch('less/*.less', ['less']);
});

/**
 * Default Task - domyślne zadania?
 */

gulp.task('default', ['less', 'watch']);

5. Uruchamianie

Aby zmiany w plikach były na bieżąco kompilowane należy uruchomić będąc w naszym folderze (test-gulp) w konsoli wpisując gulp.
Od tego momentu każda zmian na less będzie skutkowała wygenerowanie pliku style.min.css w folderze css.

Oczywiście każdy task może być uruchamiany osobno, wystarczy w konsoli także lokalnie wpisać gulp less

6. Podsumowanie

Gulp może robić z naszych plików zip, kopiować na serwer itd. 🙂
Więcej na stronie gulp plugins

W następnym artykule pokaże jak można to samo skonfigurować w Intelij IDEA.

Oblicznie sumy z komuny tabeli

function suma_oblicz(f) {

    cnt = f.elements.length;
    suma = 0;
   
    for(i=0; i<cnt; i++){
        if(f.elements[i].name.indexOf(„kwota_budzetu_”)!=-1)
        suma += eval(f.elements[i].value);
    }

    f.elements[„suma_kwota_budzetu”].value = suma;
}

Dodawanie dynamiczne tabeli do komórki innej tabeli


<p class="mce_ws_kod">&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt; New Document &lt;/TITLE&gt;
&lt;META NAME="Author" CONTENT=""&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- 
 function ukryjtab(id) {

<p class="mce_ws_kod">  var element = document.getElementById(id);
   while (element.firstChild) {
    element.removeChild(element.firstChild);
   }
 }
<p class="mce_ws_kod">    function dodajtab(id) {</p>

<p class="mce_ws_kod">        var element = document.getElementById(id);
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

<p class="mce_ws_kod">        for (var j = 0; j &lt; 2; j++) {
            var row = document.createElement("tr");
            for (var i = 0; i &lt; 2; i++) {

<p class="mce_ws_kod">                var cell = document.createElement("td");
                var cellText = document.createTextNode("komórka nr: "+j+", kolumna nr: "+i);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
            tblBody.appendChild(row);
        }

<p class="mce_ws_kod">        tbl.appendChild(tblBody);
        element.appendChild(tbl);
        tbl.setAttribute("border", "1");
    }
//--&gt;
&lt;/SCRIPT&gt;
&lt;/HEAD&gt;

<p class="mce_ws_kod">&lt;BODY&gt;
&lt;TABLE border="1"&gt;
&lt;TR&gt;
 &lt;TD&gt;fiat stilo&lt;/TD&gt;
 &lt;TD&gt;1,6&lt;/TD&gt;
 &lt;TD&gt;&lt;input type="button" name="wybor" value="pokaz" onClick="dodajtab(2)"&gt;&lt;input type="button" name="wybor" value="ukryj" onClick="ukryjtab(2)"&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
 &lt;TD colspan="3" id="2"&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
 &lt;TD&gt;fiat panda&lt;/TD&gt;
 &lt;TD&gt;1,1&lt;/TD&gt;
 &lt;TD&gt;&amp;nbsp;&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

Wyświetlenie punktów z dymkami

var dane = new Array();
dane[0] = {lat: 52.224355732689, lng: 21.253480911255, dymek: ‚<span class=”dymek”><b>opis</b></span>’}

var cnt = dane.length;
for(i=0; i<cnt; i++) {
    var d = dane[i];
    var marker = new GMarker(new GPoint(d.lng, d.lat));
    map.addOverlay(marker);
    marker.openInfoWindowHtml(d.dymek);
}

Dodawanie opcji do Selecta

Dodawanie opcji do selecta  z bieżącego okna i z nowego okna

<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
 <!–
 var tmpval = „”

 function add_option() {

  nr = document.forms[0].miasto.length
  ntyp = new Option(‚Lublin’,nr)
  document.forms[0].miasto.options[nr] = ntyp
 }

 function add_option2() {

  tmpval = document.forms[0].tmpval.value

  if(tmpval!=””) {
   nr = document.forms[0].miasto.length
   ntyp = new Option(tmpval,nr)
   document.forms[0].miasto.options[nr] = ntyp
   document.forms[0].tmpval.value = „”
  }
 }

 function new_option() {

  config =’toolbar=no, location=no, directories=no, status=no, menubar=no, width=250, height=30, scrollbars=no, resizable=no, top=150, left=480′

  win = window.open („”,”option”,config)

  body = ‚<title>Dodaj miasto</title>\n’
  body += ‚<script>\nfunction add_option()\n{\n’
  body += ‚opener.document.forms[0].tmpval.value = document.forms[0].noption.value\n’
  body += ‚opener.document.forms[0].dodaj.focus()\n’
  body += ‚self.close()\n’
      body += ‚}\n<\/script>\n<form><INPUT TYPE=”text” NAME=”noption” value=””><INPUT TYPE=”button” name=”dodaj” value=”Dodaj”‚ + ‚onClick=”‚+”add_option()”+'”></form>’

  win.document.write(body)
 }

 //–>
</SCRIPT>
</HEAD>

<BODY>
<br><br><br>
<center>
<FORM METHOD=POST ACTION=”select.html” name=”adres”>
<TABLE>
<TR>
 <TD><select name=”miasto”>
   <option value=”1″>Warszawa</option>
  </select>
 </TD>
 <TD><INPUT TYPE=”button” name=”dodaj” value=”nowe okienko dodaj” onClick=”new_option()” onFocus=”add_option2()”></TD>
 <TD><INPUT TYPE=”button” name=”dodaj2″ value=”dodaj” onClick=”add_option()”></TD>
 <TD><INPUT TYPE=”hidden” name=”tmpval” value=””></TD>
</TR>
</TABLE>
</FORM>
</center>
</BODY>
</HTML>

Dymek nad pozycja kursora myszy

Dymek nad pozycja kursora myszy

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
 <script>
 
 function vDymek(tresc, ev) {

 var IE = document.all ? true:false;
 // obsługuje dla NS
 // if (!IE) document.captureEvents(Event.MOUSEMOVE);

 if (IE) {

     tempX = event.clientX + document.body.scrollLeft;   
     tempY = event.clientY + document.body.scrollTop; 

 } else { 

     //ev = ev || event;
     tempX = ev.pageX;
     tempY = ev.pageY; 
 } 

 if (tempX < 0) {tempX = 0} ;
 if (tempY < 0) {tempY = 0}  ;

 var div = document.getElementById(‚dymek’);

     div.style.display = ‚block’;
     div.style.top = tempY+’px’;
     div.style.left = tempX+’px’;
     div.innerHTML = tempX + ‚, ‚ + tempY + ‚; ‚ + tresc;
 }

 function hDymek() {
     var div = document.getElementById(‚dymek’);
     div.style.display = ‚none’;
 }

 </script>
 
<a href onMouseOver=”vDymek(‚tresc1’, event)” onMouseOut=”hDymek()”>sprawdz wartosc</a>
<br><br><br><br><br><br><br>

<a href onMouseOver=”vDymek(‚tresc2’, event)” onMouseOut=”hDymek()”>sprawdz wartosc</a>

<div id=”dymek” style=”position: absolute;”>

</div>

 </BODY>
</HTML>