add Item outside of the plugin

brian's Avatar

brian

03 Jun, 2011 07:09 PM

i want to use this autosuggest plugin for selecting user supplied from a datasource. this works fine, but also want to be able to populate the autosuggest field from a userlist outside of the plugin. any way to do this?

  1. 1 Posted by 0plus1 on 13 Jun, 2011 01:27 PM

    0plus1's Avatar

    I would like to know this too!
    It would be nice to have a method accessible from outside the plugin to manually add an item to the list..

  2. 2 Posted by 0plus1 on 13 Jun, 2011 02:35 PM

    0plus1's Avatar

    Hi, I made a quick and ugly fix to quickly achieve this.

    After the moveSelection function paste this code:

    //public method to add new item

            $("#trigger_happy").bind("add_selected_item", function(event, data) {
                var id = opts.asHtmlID;
                if($("#as-selection-"+id, selections_holder).length <= 0 && !tab_press){
                    input.val("").focus();
                }
                add_selected_item(data, id);
            });
    

    Then create a

    in the html.

    Then to access the method:
    $("#trigger_happy").trigger("add_selected_item",[{value;

    This will work, but you must have set the asHtmlID option. If you don't understand what this does do not attempt to use it as it's buggy and hacky, but at least works.

  3. 3 Posted by Ryan Tomlinson on 21 Jun, 2011 08:04 AM

    Ryan Tomlinson's Avatar

    I can't see how you have this working. Half of the trigger method call is missed off so I can't see what data you are passing in. Either way though, this doesn't appear to work. Is there any other changes required?

  4. 4 Posted by 0plus1 on 21 Jun, 2011 02:57 PM

    0plus1's Avatar

    No, you simply have to add the code I posted after line 368.

    I don' t know why the code got truncated, the complete one is here:

    $("#trigger_happy").trigger("add_selected_item",[{value;

    Trust me, it works, I'm using my solution, I can post my modified file, but I also made several other (unrelated) modifications, so you have to actually work your way around.
    As I said it's not a clean method, is a quick and dirty fix.

  5. 5 Posted by 0plus1 on 21 Jun, 2011 02:58 PM

    0plus1's Avatar

    It still is truncated

    http://pastebin.com/2s3YZj8v

  6. 6 Posted by Ryan Tomlinson on 21 Jun, 2011 06:28 PM

    Ryan Tomlinson's Avatar

    Ah great. I see what you're doing now. I fixed it by just adding a new method to the plugin that just takes the value and adds that and then used bind/trigger to that new method and the just pass in the value,as follows:

    $("#trigger_happy").trigger("add_selected_item_external",$(this).attr("name"));

  7. 7 Posted by Jason M. Hirst on 11 Aug, 2011 11:13 AM

    Jason M. Hirst's Avatar

    I'm really interested in actually having a working example of this.

    I've the autosuggest box, which works perfectly, but also have a list of items that I'd want the user to click on and add them to the autosuggest box.

    For the record, the list is literally a list of the autosuggested items, but can't understand how on earth you're getting your code to work.

  8. 8 Posted by jhsu on 11 Aug, 2011 03:25 PM

    jhsu's Avatar

    Just got this working with the great comments from this discussion. I made some small updates.

    1. If you have multiple autosuggest widgets on a page, you have to bind it to the correct input ID, this is the opts.asHtmlID value:
      In jquery.autoSuggest.js, after moveSelection function:
      // bind the input element ID (that autosuggest is binded to) to pass in new data
      var elementId = "#" + opts.asHtmlID;
      //alert("What autosuggest ID to bind:" + elementId);
      $(elementId).bind("assignTaskCustom", function(event, pData) {
          var id = opts.asHtmlID;
          if($("#as-selection-"+id, selections_holder).length <= 0 && !tab_press){
              input.val("").focus();
          }
          add_selected_item(pData, id);
      });
      
    2. Then call the trigger function:
      var jsonAssigneeName = [{fullName: "Fullname", firstName: "Firstname", lastName: "Lastname", userName: "Username"}];
      $("#inputID").trigger("assignTaskCustom", jsonAssigneeName[0]);

    Hope this helps!

    Has anyone deleted all items from the list with Javascript, versus manually clicking delete from the widget? aka, exposing a removeElement function, vs addElement as we're talking about here?

  9. 9 Posted by Dervaish on 12 Aug, 2011 11:39 AM

    Dervaish's Avatar

    I've been trying to make these sample code work but no luck. it does show htmlID but it doesn't add the item into the field. i have a separate list of items and want to add the clicked item into the autosuggest field. the field itself works fine but now i want to do that through a separate list. can you post a working example with usual set up and the new code and html?

    thanks.

  10. 10 Posted by Jason M. Hirst on 12 Aug, 2011 11:49 AM

    Jason M. Hirst's Avatar

    I actually got this working, thanks to someone on here (I can't remember their name OR the post), but it DOES work.

    I used this:

    $.autoSuggest = {
        add_selected_item: function (data, num) {
            input.val("").focus();
            values_input.val(values_input.val() + data[opts.selectedValuesProp] + ",");
            var item = $('<li class="as-selection-item" id="as-selection-' + num + '"></li>').click(function () {
                opts.selectionClick.call(this, $(this));
                selections_holder.children().removeClass("selected");
                $(this).addClass("selected");
            }).mousedown(function () { input_focus = false; });
            var close = $('<a class="as-close">&times;</a>').click(function () {
                values_input.val(values_input.val().replace(data[opts.selectedValuesProp] + ",", ""));
                opts.selectionRemoved.call(this, item);
                input_focus = true;
                input.focus();
                return false;
            });
            org_li.before(item.html(data[opts.selectedItemProp]).prepend(close));
            opts.selectionAdded.call(this, org_li.prev());
        }
    }
    

    at the end of the js file (it replaces the exisiting add_selected_item function, so don't forget to remove it) and then I run the following:

    var data = new Object();
    data.name = [name];
    data.value = [value];
    $.autoSuggest.add_selected_item(data, Math.floor(Math.random() * 11));

    where name and value are what you want.

    This works - PERFECT!

  11. 11 Posted by Jon on 05 Jan, 2012 08:39 AM

    Jon's Avatar

    Adapting jhsu's work:

    Reset trigger

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac