Many to many releation

See more:

jQuery

MVC3

Hey i have a implementation i can to figure out to do in asp.net MVC3 web application.

I have to Entities with a many to many relation. I have already existing controller and views for both classes, but my problems is i can't figure out how to implement the crud relation between the two entities.

My two classes are as following:

public class Recipe
    {
        public int RecipeID { get; set; }
        [MaxLength(255)]
        public string Title { get; set; }
        [DataType(DataType.MultilineText)]
        public string Description { get; set; }
        [DataType(DataType.MultilineText)]
        public string Story { get; set; }
        public string ImageUrl { get; set; }
        public virtual ICollection<RecipeIngredient> Ingredients { get; set; }
    }

public class Ingredient
    {
        public int IngredientID { get; set; }
        public string Name { get; set; }
        public virtual IngredientCategory Category { get; set; }
    }

Theses are joinet by an entity holding some extra information like this:

¨
public class RecipeIngredient
    {
        public int RecipeIngredientID { get; set; }
        public int IngredientID { get; set; }
        public int RecipeID { get; set; }
        public string Amount { get; set; }
        public string Measurement { get; set; }
        public virtual Recipe Recipe { get; set; }
        public virtual Ingredient Ingredient { get; set; }
    }

Soo far so good. Then i have added this to the recipe edit view.

Add ingredients: 
        <input id="txtAmount" type="text" />
        <select id="Select1">
            <option>DL</option>

        </select>
<input type="text" name="completeMe" id="completeMe" />
        <input type="submit" value="Search" />
        </p>
<script type="text/javascript">

$(function() {

$("#completeMe").autocomplete({
    autoFocus: true,
    source: '/Recipe/AutoCompleteIngredients',
    minLength: 1,
    select: function(event, ui) {
    }
});
});

</script>

I want to be able to add ingredients by searching for ingredient and typing amount and measurement in the input fields. Searching works fine with jquery autocomplete, but i can't wrap my head around how i takes the selected ingredient from the jquery autocomplete and creates an RecipeIngredient.

I know a other solution is the checkbox approach, but this is not what i want. I can't seem to find any examples on this, and don't even know if i'm doing the right approach or a entire other way would be better.

Any help is greatly appreciated.
/Anders