Creating an autocomplete field within a dialog

Greetings all,

Currently I'm working on creating a dialog window that has an autocomplete field within it. I've done autocomplete fields before, along with dialog windows, but never the two together and am finding an issue. Currently, this is what my code looks like.

View (parent)

```
...
```
```
<div id="divPOExistingProduct">
```
```
</div>
```
```
 
```
```
 $("#divPOExistingProduct").dialog({
```
```
height: 500,
```
```
width: 700,
```
```
modal: true,
```
```
autoOpen: false,
```
```
draggable: false,
```
```
resizable: false,
```
```
open: function () { },
```

close: function () { $("#divPOExistingProduct").html(""); }

```
});
```
```
 
```
```
//"Add Existing" button
```

$("#addexisting-poproduct").click(function (e) {

```
e.preventDefault();
```

var link = '@(Url.Action("POExistingProductAddPopup", "PurchaseOrder", new { purchaseOrderId = Model.Id }))';

```
existingProductDialog.load(link);
```
```
existingProductDialog.dialog("open");
```
```
return false; });
```
```
...
```

View (dialog)

```
...
```
```
<tr>
```
```
<td class="adminTitle">
```
```
@Html.NopLabelFor(model => model.Name):
```
```
</td>
```
```
<td class="adminData">
```
```
@Html.EditorFor(model => model.Name)
```

@Html.ValidationMessageFor(model => model.Name)

```
</td>
```
```
</tr>
```
```
...
```
```
 
```
```
$("#Name").keypress(function () {
```

var productName = $("#Name").val(); //0 based length, so add 1

```
if (productName.length + 1 > 2)
```
```
{
```
```
//Do autocomplete functionality
```

$("#Name").autocomplete({ //Here is where issue starts

```
source: function (request, response) {
```

//Get available Products based on search parameter and map data

$.getJSON('@Url.Action("GetProducts", "PurchaseOrder")', { searchProduct: productName }, function (data) { response($.map(data, function (item) {

return { value: item.Name, id: item.Id };

```
}));
```
```
})
```
```
},
```

//Used to dictate actions when user selects an option within autocomplete

```
select: function (event, ui) {
```

//Check to see if user tried to select the "No results" option

```
if (ui.item.id == 0) {
```

//Do some house cleaning and alert user to mistake

alert("You must retry your search for a Product");

```
$("#Name").val("");
```
```
$("#ProductId").val("");
```
```
return false;
```
```
}
```
```
//Record ProductId
```
```
$("#ProductId").val(ui.item.id);
```
```
}
```
```
});
```
```
}
```
```
});
```

The problem begins when the autocomplete method itself is created. I get the following error:

Error: Object doesn't support this property or method.

The error points to where I make my declaration on the autocomplete functionality (within the if loop for the keypress). Originally I thought Name just wasn't being found but several tests showed that it exists. I then thought maybe it had something to do with the masterpage this view inherits, which may or may not. It includes the css for jquery-ui a second time (since dialog is part of original View technically) but even removing the second version of it does nothing.

Any suggestions would be appreciative.

Kindest Regards,

Chad Johnson

Topic Participants
chad_johnson
kbwood.au
mlaird

Creating an autocomplete field within a dialog

Creating an autocomplete field within a dialog

Topic Participants

chad_johnson

kbwood.au

mlaird