0

Basically I'm having three text input. First is autocomplete (book name). Second is book price and third is book author. Please help me in changing the 2nd and third input text box values according to the selection of autocomplete input box. Fiddle setup is at http://jsfiddle.net/premgowda/UC74L/6/

Json code below from php echo output

{
        "users": [
            {
                "name": "ajax",
                "price": "1003",
                "author": "foriegn"
            },
            {
                "name": "jquery",
                "price": "1000",
                "author": "dd"
            },
            {
                "name": "mysql",
                "price": "1000",
                "author": "f"
            },
            {
                "name": "php",
                "price": "1000",
                "author": "abc"
            },
            {
                "name": "php frameword",
                "price": "1000",
                "author": "def"
            },
            {
                "name": "php tutorial",
                "price": "1000",
                "author": "ghi"
            },
            {
                "name": "wordpress",
                "price": "1000",
                "author": "g"
            },
            {
                "name": "wordpress theme",
                "price": "1000",
                "author": "h"
            },
            {
                "name": "xml",
                "price": "1000",
                "author": "j"
            }
        ]
    }   

jQuery code below

var counter = 2;
    var availableTags = ["php", "php frameword", "php tutorial", "jquery", "ajax", "mysql", "wordpress", "wordpress theme", "xml"];

    $("#addButton").click(function () {

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

        var roleInput = $('<input/>', {
            type: 'text',
            placeholder: 'Role',
            name: 'Role' + counter,
            id: 'textbox' + counter
        });

        var priceInput = $('<input/>', {
            type: 'text',
            placeholder: 'price',
            name: 'price' + counter,
            id: 'textbox' + counter
        });

        var searchInput = $('<input/>', {
            type: 'text',
            placeholder: 'search',
            name: 'search' + counter,
            id: 'se' + counter
        });

        var hidd = $('<input/>', {
            type: 'hidden',
            name: 'searchhid' + counter,
            id: 'searchhid' + counter
        });



        newTextBoxDiv.append(searchInput).append(roleInput).append(priceInput).append(hidd);

        newTextBoxDiv.appendTo("#TextBoxesGroup");

        $('#se' + counter).autocomplete({
            source: availableTags
        });
        counter++;
    });    

html code below

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1" class="form-inline control-group">
    <input type='button' value='Add' id='addButton' />
</div>

Please tell me how to achieve this. For ex. If I select, ajax in autocomplete, second input text box should be filled with 1003 and third with "foreign"

2
Contributors
1
Reply
17
Views
3 Years
Discussion Span
Last Post by noelthefish
0

try something like this

 $('#se' + counter).keydown(function(event) {
    $.each(json.users, function(i, e) {
            if (e.name.search(new RegExp(/$('#se' + counter).val()/i)) != -1){
            $('#price' + counter).val(e.price);
            $('#author' + counter).val(e.author);
        }
    });
});

I would rename your IDs here FROM id: 'textbox' + counter TO id: 'price' + counter

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.