Search code examples
javascriptjqueryjquery-uigetjsonjquery-ui-autocomplete

Capitalize first letter of string on json sending


I have a textbox to search a city from a JSON file according to cityname , when I type on the textbox I have to write the first letter with Capital letterr ,otherwise my code does not work well .

how can I introduce in my code that send Term with first capital letter?

i used css to change the first letter to uppercase but it does not work for me and send it with small letter .

here is my code :

<input autocomplete="off"  class="autocomplete-hint select" data-auto-complete-minlength="1" type="text" onFocus="searchCountry(this)">

<script type="text/javascript">

    function searchCountry(a) {
        $(function() {
            var cache = {};
            $(a).autocomplete({
                appendTo: ".countrys",
                change: function (event, ui) {
                    if (ui.item == null || ui.item == undefined) {
                        $(a).val("");
                        $(a).empty();
                        $(a).next("#loading").hide();
                    } else {
                        var position = $(".countrys").position(),
                        left = position.left, top = position.top;
                        $(".countrys > ul").css({
                            left: left + 20 + "px",
                            top: top + 4 + "px"
                        });
                    }
                },
                minLength: 1,
                select: function (event, ui) {
                    // Set autocomplete element to display the label
                    this.value = ui.item.label;
                    $(this).closest("tr").find(".countryid").val(ui.item.hotelid);
                    $(this).closest("tr").find(".countryid").next(".countryid").val(ui.item.hotelid);

                    // Store value in hidden field
                    $('#hidden_field').val(ui.item.id);
                    $('#hidden_field1').empty().text(ui.item.label);

                    // Prevent default behaviour
                    return false;
                },
                source: function( request, response ) {
                    $(a).next("#loading").show();
                    var term = request.term;
                    if (term in cache) {
                        response(cache[term]);
                        return;
                    }

                    $.getJSON( "jsonloadi.bc", request, function( data, status, xhr ) {
                        $(a).next("#loading").hide();
                        cache[ term ] = data;
                        response( data );
                    });
                }
            });
        });
    }
</script>

Solution

  • You can use following function to capitalise any string (source)

    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
    }
    

    Here, first character is changed to uppercase using string.charAt(0).toUpperCase() and rest is changed to lower case. You can use this function to modify your request like following.

    source: function( request, response ) {
      request.term = capitalizeFirstLetter(request.term)
      ...
    

    I haven't tested this out, but it should work ok.