pSelect

(Using tvguide.com's search API; hope they don't mind)

Basic Multiple-Choice Ajax Search Widget

Code

<div p_select multiple name="tvshows" ajax-url="http://mapi.tvguide.com/watchlist/search" search-key="keyword" extra-search-params="{'limit':'10', 'v': '1.0'}" value-field="id" display-field="name" placeholder="Find TV Shows or Movies" ng-model="tc.showsAndMovies" ></div>

Explanation of Attributes

multiple

Makes it a multiple-select widget

name="tvshows"

Form field name (required)

ajax-url="http://mapi.tvguide.com/watchlist/search"

URL for the search API

search-key="keyword"

Indicates query parameter expected by the API. This one expects 'keyword', e.g.

?keyword=modern+family

Defaults to 'q', so if your query looks like q=the+simpsons, you can skip this.

extra-search-params="{'limit':'10', 'v': '1.0'}"

Additional parameters to pass to the API. Optional

value-field="id"

The field in the returned data to use as the form value. This API returns items with a structure like

{'name': 'The Simpsons', 'id': '100521', ...}

so we use "id" as the value field (and "name" in the display-field — see below).

display-field="name"

The field in the returned data to display in the dropdown

placeholder="Find TV Shows or Movies"

Placeholder text (optional, defaults to "Select")

ng-model="tc.showsAndMovies"

The model corresponding to the field. Required

Alternate Template

This is probably the most useful thing about the widget. You can completely customize the dropdown and results by editing the HTML template.

This version displays images (when available) with each choice.

Additional Attributes

template-url="html_templates/picture_template.html"

Specifies html template for displaying the widget. Default is p_select.html

Single-Selection Version

Same as the first one, but leave off the multiple attribute

Preselected Options on an Ajax Widget

Code

Same as above, but encloses a <select> tag with preselected options:

<p_select multiple ajax-url="http://mapi.tvguide.com/watchlist/search" search-key="keyword" extra-search-params="{'limit':'10', 'v': '1.0'}" placeholder="Find TV Shows or Movies" ng-model="tc.showsAndMovies" > <select name="moretvshow" multiple> <option value="100521" selected="selected">The Simpsons</option> <option value="100170" selected="selected">Futurama</option> </select> </p_select>

Also notice that 'name' and 'multiple' attributes can be set on the <select> tag. The idea is that you can just enclose an existing <select> and it will work the way you expect

Enclose a standard <select> with the directive.

Bob Hope Bob Newhart Bob Dobbs Bob the Builder Bob Marley Bob Melvin Bob Dylan

Code

<p_select ng-model="tc.bob"> <select name="bob" placeholder="Find a Bob"> <option>Bob Hope</option> <option>Bob Newhart</option> <option>Bob Dobbs</option> <option>Bob the Builder</option> <option>Bob Marley</option> <option>Bob Melvin</option> <option>Bob Dylan</option> </select> </p_select>

Multiple Choice, with Preselected Options.