Jquery UI Autocomplete with Multiple Values and Multiple Labels

Question

I have a two fields, one hidden and one a text input. I am receiving the information from a remote PHP file, which gives the information in a JSON format (value and label).

What I'm trying to do is show the selected labels in the text field, which is divided by a comma, but at the same time I want the divided labels have their values inside the hidden input (also divided by commas), this is my code so far for the text field which lacks a code for the hidden values input

<script type="text/javascript">
    function split( val ) {
    return val.split( /,\s*/ );
    }
    function extractLast( term ) {
    return split( term ).pop();
    }
    $( "#category_pictures_labels" )
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
    $( this ).data( "ui-autocomplete" ).menu.active ) {
    event.preventDefault();
    }
    })
    .autocomplete({
    source: function( request, response ) {
    $.getJSON( "/admin/pictures_autocomplete", {
    term: extractLast( request.term )
    }, response );
    },
    search: function() {
    // custom minLength
    var term = extractLast( this.value );
    if ( term.length < 1 ) {
    return false;
    }
    },
    focus: function() {
    // prevent value inserted on focus
    return false;
    },
    select: function( event, ui ) {
    var terms = split( this.value );
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push( ui.item.value );
    // add placeholder to get the comma-and-space at the end
    terms.push( "" );
    this.value = terms.join( ", " );
    return false;
    }
    });
</script>

<input type="text" name="category_pictures_labels" value="" id="category_pictures_labels" />
<input type="text" name="category_pictures" value="" id="category_pictures" />

do you get any output or what do you exactly return? and what do you exactly need? — user123_456
– user123_456, Commented May 3, 2013 at 16:06
the current output is the item.value, which I want to be sent to the hidden category_pictures field divided by commas and the item.label to be sent to the category_pictures_labels field also divided by commas (multiple autocomplete) — Hossein J
– Hossein J, Commented May 3, 2013 at 16:11

Rahul Gupta · Accepted Answer · 2014-07-15 12:14:32Z

2

DEMO

JS code:

 $(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}

var projects = [
{
value: "yahoo",
label: "Yahoo !"
},
{
value: "bing",
label: "Bing"
},
{
value: "google",
label: "Google"
}
];

$( "#project" )
 // don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
projects, extractLast( request.term ) ) );
},

//    source:projects,    
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );

    var selected_label = ui.item.label;
    var selected_value = ui.item.value;

    var labels = $('#labels').val();
    var values = $('#values').val();

    if(labels == "")
    {
        $('#labels').val(selected_label);
        $('#values').val(selected_value);
    }
    else    
    {
        $('#labels').val(labels+","+selected_label);
        $('#values').val(values+","+selected_value);
    }   

return false;
}
});

 });

HTML :

<div id="project-label">Select search engines <b>(multiple)</b> (type "g" or "b" or "y" for a start):</div>
<input id="project">
<br>
Selected labels:    
<input type="text" id="labels">
<br>
Selected values:    
<input type="text" id="values">

edited Jul 15, 2014 at 12:14

answered Jul 15, 2014 at 8:51

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hossein J Over a year ago

How about removing the values when I delete the labels from the input?

Rahul Gupta Over a year ago

If you want rich functionalities for manipulating the selected options on the autocomplete, then I would recommend you to use a specialized plugin for that with Tagging webspirited.com/tagit/?themeroller=true#demo8 instead of using a simple autocomplete

Rahul Gupta Over a year ago

A simple autocomplete have certain features limitations which can be overcomed by using another alternative ! Please consider accepting the answer if that helped you !

Collectives™ on Stack Overflow

Jquery UI Autocomplete with Multiple Values and Multiple Labels

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related