jQuery数据操作

I have a scenario
Ajax is working for data correctly which is then available to autosuggest plugn of jquery which selects and shows selected data on page correctly. The only thing I need to get either all of the one by one selected values by user to put in hidden field so that I can get on submission.

IN HEAD:

$('#mycustom').magicSuggest({
data: 'http://dev.ejuicysolutions.com/demo/umer/fb2/data.json',
sortOrder: 'name',
minChars: 2,
maxResults: false,
selectionPosition: 'right',
maxDropHeight: 120,
expandOnFocus: false,
noSuggestionText: 'No Team Member found'
});
});


IN BODY->FORM:

<form method="post" action="">
<h3>Custom</h3>
<input id="mycustom" style="width:400px;" type="text"/>
<input type="hidden" name="values" value="">
</form>



Sampel can be seen at: http://dev.ejuicysolutions.com/demo/umer/fb2/
and documentation can be seen at: http://nicolasbize.github.com/magicsuggest/

In documentation TAB there is "getValue() : array[int / string]".

Waiting for your response.

You can use public function getSelectedItems() given by the plugin.

var objMagicSuggest = $('#mycustom').magicSuggest({
            data: 'http://dev.ejuicysolutions.com/demo/umer/fb2/data.json',
            sortOrder: 'name',
            minChars: 2,
            maxResults: false,
            selectionPosition: 'right',
            maxDropHeight: 120,
    expandOnFocus: false,
    noSuggestionText: 'No Team Member found'

        });
var selectedElements = objMagicSuggest.getSelectedItems();

You will get array of selected elements.

So there are 2 things:

  • the plugin is form-ready, which means that if included in a form, the selected values will automatically be submitted along with the other form items. You can define a name for it using the 'name' property (check the docs). Then you will retrieve the serialized values with, say if you're working with PHP on the backend, $_POST['given-name'].

So in your case since you didn't specify a valueField, the $_POST['given-name'] will contain a serialized array of ids.

[EDIT]: Here's an example:

    $(document).ready(function() {
        $('#mycustom').magicSuggest({
            data: 'http://dev.ejuicysolutions.com/demo/umer/fb2/data.json',
            sortOrder: 'name',
            minChars: 2,
            maxResults: false,
            selectionPosition: 'right',
            maxDropHeight: 120,
            expandOnFocus: false,
            noSuggestionText: 'No Team Member found',
            name: 'teammembers' // this is what you need to add
        });
    });

Perform a selection (for ex. San Jose and San Antonio) and then add a submit button.

Then on your server side:

$teammembers = $_POST['teammembers']; // $teammembers = '[20,17]'
  • if you want to retrieve the values yourself prior to sending the form for pre-treatment or whatever, you have 2 methods: getValue() which will get the array of selected ids and getSelectedItems() which will get the array of selected json objects corresponding to your data.

Depending upon what you need you can retrieve either and then send them with your request.

Here's a jsfiddle that displays the selected names using the selectionchange event:

http://jsfiddle.net/KFMtQ/1/

Cheers!