构建航班搜索应用全流程解析

### 构建航班搜索应用全流程解析 在开发航班搜索应用时，我们需要完成多个关键步骤，包括收集用户输入、验证输入数据、连接 RESTful API 以及解析返回的 XML 数据。下面将详细介绍这些步骤。 #### 1. 收集用户输入 在展示搜索结果之前，我们需要收集用户的输入信息，这有助于将潜在匹配数量从数千个限制到数百个。 ##### 1.1 自动完成功能 在“To”和“From”字段中实现自动完成功能。不过，旧版浏览器（如 Internet Explorer <= 8 和 Android < 3）的 JavaScript 运行速度明显慢于现代浏览器。如果要支持这些浏览器，可将 `minLength` 设置为 3，以避免出现卡顿。 自动完成小部件在显示长选项列表时默认不显示滚动条，可通过以下 CSS 代码添加滚动条： ```css .ui-autocomplete { max-height: 200px; overflow-x: hidden; overflow-y: auto; } ``` 上述代码中，`overflow-y: auto` 表示当菜单高度超过 200 像素时，浏览器会添加垂直滚动条；`overflow-x: hidden` 则防止浏览器创建水平滚动条。 ##### 1.2 使用 jQuery UI 填充 HTML5 输入 表单还需要添加日期选择器和数字选择器。虽然 jQuery UI 小部件功能强大且可扩展，但对于简单场景，HTML5 原生控件（如 `<input type="date">` 和 `<input type="number">`）更为合适，因为移动设备可为数据输入提供优化的键盘。 为了确保在所有浏览器中都能正常工作，可采用 polyfilling 技术，即在支持原生控件的浏览器中使用原生支持，在不支持的浏览器中使用基于 JavaScript 的解决方案。具体步骤如下： 1. **添加 HTML 代码**： ```html <div> <label for="date">Date:</label> <input id="date"> </div> <div> <label for="results">Max # of Results:</label> <input id="results" value="10" min="10" max="100" step="10"> </div> ``` 2. **在 app.js 文件中添加 JS 代码**： ```javascript require([ ..., "jquery-ui/datepicker", "jquery-ui/spinner" ], function( ..., datepicker, spinner ) { ... var date = $( "#date" ), results = $( "#results" ); date.datepicker(); results.spinner(); } ); ``` 3. **切换到新的输入类型**： ```html <input type="date" id="date"> <input type="number" id="results" value="10" min="10" max="100" step="10"> ``` 4. **修改 app.js 文件中的逻辑**： ```javascript function isTypeSupported( type ) { var input = document.createElement( "input" ); input.setAttribute( "type", type ); return input.type === type; }; var date = $( "#date" ), results = $( "#results" ); if ( !isTypeSupported( "date" ) ) { date.datepicker({ dateFormat: "yy-mm-dd" }); } if ( !isTypeSupported( "number" ) ) { results.spinner(); } ``` #### 2. 验证用户输入 客户端表单验证是一项具有挑战性的任务。HTML5 引入了约束验证机制，通过一系列 HTML 属性、DOM API 和 CSS 钩子来简化表单验证。 ##### 2.1 使用 HTML 属性进行验证 为前三个表单元素添加 `required` 属性，使它们成为必填项： ```html <input id="from-airport" required> <input id="to-airport" required> <input type="date" id="date" required> ``` 当用户尝试提交未填写这些字段的表单时，支持约束验证的浏览器将阻止提交并显示错误消息，无需编写任何 JavaScript 代码。 ##### 2.2 处理不支持约束验证的浏览器 虽然大多数流行浏览器支持约束验证 API，但一些基于 WebKit 的浏览器（如 Safari、iOS Safari 和默认的 Android 浏览器）未开启该功能。为了解决这个问题，可使用以下代码： ```javascript function validateForm() { var invalidFields, form = $( "form" ); form.find( ".ui-state ```