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

Zmiana wartości opcji selecta

Zmiana wartości opcji selecta


$('#right table td input[name=imie]').parent().parent().parent().css({'display':'none'});
$('#right table .teh').parent().parent().parent().parent().css({'display':'none'});
$('#right table td select[name=stanowisko] option:eq(0)').replaceWith("Zamiana wartości text");
$('#right table td select[name=stanowisko]').parent().prev().html('Zmiana tytułu labela nad selectem taki');
$('#right table td select[name=stanowisko]').val('0');

Zmiana koloru bordera pola formularza


jQuery(function($){
<?php echo "var err_field = new Array('".@implode("', '", $bad_fields)."');"; ?>
$.each(err_field, function(i, value) {
jQuery("#"+value).css({'border-color': 'red'});
});
});

Php zwraca tablice stringów, idków pól formularza.

jQuery dla każdego obiektu DOM, na podstawie jego id z array err_file, ustawia kolor bordera na czerwony.

Kolorowanie rekordów 2 sposób

<script type=”text/javascript”>

$( function(){
$(‚tr:first’).addClass(‚bold’);
$(„tr:even”).css(„background-color”, „#DFF8FF”);
});

</script>

<style>
.bold {
color: red;
}

</style>

<table>
<tr>
<td>pierwsza kolumna</td>
<td>druga kolumna</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Kolorowanie rekordów

<script type=”text/javascript”>

$( function(){
$(‚.zebra tr:even’).addClass(‚even’);
$(‚.zebra tr:odd’).addClass(‚odd’);
});

</script>

 

<style>
.zebra tr.even td, .zebra tr.even th { background-color:#FFF; }
.zebra tr.odd td { background-color:#A9C0E0; }
</style>

 

<table class=’zebra’>
<thead>
<tr>
<th>pierwsza</th>
<th>druga</th>
</tr>
</thead>
<tbody>
<tr>
<td>2009-03-20<td>
<td>1<td>
</tr>
<tr>
<td>2009-03-20<td>
<td>2<td>
</tr>
<tr>
<td>2009-03-20<td>
<td>3<td>
</tr>
<tbody>
</table>