Input field matching content ( specific case )

Question

I need to have an input field to match its content and found this very good thread about it Adjust width of input field to its input

I have implemented this JS version (from Michael on previous thread) : http://jsfiddle.net/4Qsa8/

$(document).ready(function () {
    var $inputs = $('.resizing-input');

    // Resize based on text if text.length > 0
    // Otherwise resize based on the placeholder
    function resizeForText(text) {
        var $this = $(this);
        if (!text.trim()) {
            text = $this.attr('placeholder').trim();
        }
        var $span = $this.parent().find('span');
        $span.text(text);
        var $inputSize = $span.width();
        $this.css("width", $inputSize);
    }

    $inputs.find('input').keypress(function (e) {
        if (e.which && e.charCode) {
            var c = String.fromCharCode(e.keyCode | e.charCode);
            var $this = $(this);
            resizeForText.call($this, $this.val() + c);
        }
    });

    // Backspace event only fires for keyup
    $inputs.find('input').keyup(function (e) { 
        if (e.keyCode === 8 || e.keyCode === 46) {
            resizeForText.call($(this), $(this).val());
        }
    });

    $inputs.find('input').each(function () {
        var $this = $(this);
        resizeForText.call($this, $this.val())
    });
});

Though one issue: I have google automplete on my website and when the user chooses a specific address from a drop down list the field size is not changed.

Would there be an easy addition to the current JS in order to make it work for drop down menu selection ?

EDIT

Here is the autocomplete JS

function initializeAutocomplete(id) {
        var element = document.getElementById(id);
        if (element) {
            var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
            google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);
        }
    }

    // Injecte les données dans les champs du formulaire lorsqu'une adresse est sélectionnée
    function onPlaceChanged() {
        var place = this.getPlace();

        document.getElementById("street_number").value = '';
        document.getElementById("route").value = '';
        document.getElementById("postal_code").value = '';
        document.getElementById("locality").value = '';
        document.getElementById("sublocality").value = '';
        document.getElementById("country").value = '';




        for (var i in place.address_components) {
            var component = place.address_components[i];

            for (var j in component.types) {

                var type_element = document.getElementById(component.types[j]);

                if (type_element) {
                    type_element.value = component.long_name;
                }
            }
        }

        var longitude = document.getElementById("longitude");
        var latitude = document.getElementById("latitude");
        longitude.value = place.geometry.location.lng();
        latitude.value = place.geometry.location.lat();
    }

    // Initialisation du champs autocomplete
    google.maps.event.addDomListener(window, 'load', function() {
        initializeAutocomplete('autocomplete');
    });

And HTML looks like this (not the whole form which is pretty big but invidual input element):

<div class="resizing-input">
        <input id="autocomplete" placeholder="address" type="text" name="place[addressfull]" />
        <span  style="display:none"></span>
      </div>

Please show us your code where you tried to implement Google autocomplete. — camelsWriteInCamelCase, Jan 30 '18 at 13:10
updated. The resizing JS actaully resizes a hidden span that is located alongside the input element each time a key is pressed inside the input tag. What would work is also resizes all span elements when a mouse click is detected everywhere on the page. (because when i click the drop down menu of addresses I guess I am outside the input tag) — Maxence, Jan 30 '18 at 18:25

score 0 · Answer 1 · answered Jan 30 '18 at 13:24

0

Use the jQuery's on event

$inputs.find('input').on('input',function(e){
    //Your code here
});

answered Jan 30 '18 at 13:24

Hi Tanmay, should I add all my code above between your two lines of codes ? Or does your code get inserted somewhere instead ? – Maxence Jan 30 '18 at 13:39
add it before the line `$inputs.find('input').each(function () {` – Jan 30 '18 at 13:41
Hi Tanmay, it does not seem to work. Each time I press a key I can see "Hello I am an event" but when I select an address in the dropdown menu, it doesnt trigger "Hello I am an event" – Maxence Jan 30 '18 at 18:00
As i commented above it would work on mouse keypress everywhere on page. Then all span elements (or inside class 'resizing-input') should be resized. It won't affect the spans already resized on keypress and fix my pb. (tho I don''t know much JS to write it) – Maxence Jan 30 '18 at 18:35

Input field matching content ( specific case )

1 Answers1