如何使用knockout js执行AutoComplete

本文介绍了如何使用knockout js执行AutoComplete的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 大家好 我正在尝试使用淘汰赛js在文本框中自动完成 我用Google搜索并发现了一些很好的链接并试图实现那个。 我试过这个链接 这显示错误 未捕获的SyntaxError：意外的令牌ILLEGAL 我的代码 < ！DOCTYPE html > < html xmlns = http://www.w3.org/1999/ xhtml > < head id = head runat = 服务器 > < title > < / title > < script src = http://ajax.googleapis.com/ajax/ libs / jquery / 1.8.2 / jquery.min.js 类型 = text / javascript > ; < / script > < script src = http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js > < / script > < / head > < body > < 表格 id = form1 runat = server > < div > < 输入 数据-bind = jqAuto：{autoFocus：true}，jqAutoSource：myPeople，jqAutoQuery：getPeople，jqAutoValue： mySelectedGuid，jqAutoSourceLabel：'displayName'，jqAutoS ourceInputValue：'name'，jqAutoSourceValue：'guid' / > < hr / > < div data-bind = text：mySelectedGuid（） ？ mySelectedGuid（）：'未选中' > < / div > < hr / > 用于测试在其他地方设置模型值： < 选择 data-bind = 选项：myPeople，optionsCaption：'select a person ...'，optionsText：'displayName'，optionsValue：'guid'，value：mySelectedGuid > < / select > < hr / > < / div > < script > // jqAuto - 主要绑定（应该包含传递给自动完成的其他选项） // jqAutoSource - 要填充的数组选择（需要是observableArray） // jqAutoQuery - 返回的函数选项 // jqAutoValue - 写入所选值的位置 // jqAutoSourceLabel - 应在可能的选择中显示的属性 // jqAutoSourceInputValue - 应在输入框中显示的属性 // jqAutoSourceValue - 用于值的属性 ko.bindingHandlers.jqAuto = { init： function （element，valueAccessor，allBindingsAccessor，viewModel）{ var options = valueAccessor （）|| {}， allBindings = allBindingsAccessor（）， unwrap = ko.utils.unwrapObservable， modelValue = allBindings.jqAutoValue， source = allBindings.jqAutoSource， query = allBindings.jqAutoQuery， valueProp = allBindings.jqAutoSourceValue， inputValueProp = allBindings.jqAutoSourceInputValue || valueProp， labelProp = allBindings.jqAutoSourceLabel || inputValueProp; // 由select和change事件处理程序共享的函数 function writeValueToModel（valueToWrite）{ if （ko.isWriteableObservable（modelValue）） { modelValue（valueToWrite）; } 其他 { // 写入非-observable if （allBindings [' _ ko_property_writers']&& allBindings [' _ ko_property_writers'] [' jqAutoValue']） allBindings [' _ ko_property_writers'] [' jqAutoValue']（valueToWrite）; } } // 在选择上写下正确的模型的值 options.select = function （event，ui）{ writeValueToModel（ui.item？ui.item） .actualValue： null ）; }; // 有关更改，请确保它是有效值或清除模型值 options.change = function （event，ui）{ var currentValue = $（element）.val（）; var matchingItem = ko.utils.arrayFirst（unwrap（source）， function （item） { return unwrap（inputValueProp？item [inputValueProp]：item）=== currentValue; }）; if （！matchingItem）{ writeValueToModel（ null ） ; } } // 保持自动完成当前响应 var currentResponse = null ; // 处理DO中正在更新的选项，以从源中解除值更新（选项）更新 var mappedSource = ko.dependentObservable（{ read： function （）{ mapped = ko.utils.arrayMap（unwrap（source）， function （item）{ var result = {}; result.label = labelProp？unwrap（item [labelProp]）：unwrap（item）.toString（）; // 在弹出选项中显示 result.value = inputValueProp？unwrap（item [inputValueProp]）：unwrap（ item）.toString（）; // 在输入框中显示 result.actualValue = valueProp？ unwrap（item [valueProp]）：item; // 在模型中存储 return 结果; }）; 返回映射; }，写： function （newValue）{ source（newValue）; // 更新源observableArray，因此我们的映射值（上图）正确 if （currentResponse）{ currentResponse（mappedSource（））; } }， disposeWhenNodeIsRemoved：element }）; if （查询）{ options.source = function （请求，回复）{ currentResponse = response; query.call（ this ，request.term，mappedSource）; } } 其他 { // 每当组成源的项目更新时，请确保自动完成知道它 mappedSource.subscribe（ function （newValue）{ $（element）.autocomplete（ option， source，newValue）; }）; options.source = mappedSource（）; } // 初始化自动填充 $（element）.autocomplete（options）; }， update： function （element，valueAccessor，allBindingsAccessor，viewModel）{ // 基于模型更改的更新值 var allBindings = allBindingsAccessor （）， unwrap = ko.utils.unwrapObservable， modelValue = unwrap（allBindings.jqAutoValue）|| ' '， valueProp = allBindings.jqAutoSourceValue， inputValueProp = allBindings.jqAutoSourceInputValue || valueProp; // 如果我们在输入中写入不同的属性而不是写入如果（valueProp&& inputValueProp！== valueProp）{ var source = unwrap（allBindings.jqAutoSource）|| []; var modelValue = ko.utils.arrayFirst（source， function （item）{ return unwrap（item [valueProp]）=== modelValue; }）|| {}; } // 使用应显示的值更新元素输入 $（元素）.val（modelValue&& inputValueProp！== valueProp？unwrap（modelValue [inputValueProp]）：modelValue.toString（））; } }; function 人（guid，name，email）{ this .guid = ko.observable（guid）; this .name = ko.observable（name）; this .email = ko.observable（email）; this .displayName = ko.dependentObservable（ function （）{ return 此 .name（）+ [ + 此 .email（）+ ]; }，此）; } var viewModel = { myPeople：ko.observableArray（）， mySelectedGuid：ko .observable（ ec361d63-38ae-4ecc-ab46-6c0ef19ed3ac）}; function getPeople（searchTerm，sourceArray）{ $ .ajax（{ type：' POST'， url：' / echo / json /'， data：{ json：' {}'，延迟：。 5 }，成功： function （数据）{ // 假响应 var result = []; for （ var i = 0 ;我< 5 ; i ++）{ result.push（ new Person（ 5658ff20-f230-4176-97d1-0ac21abfdbd + i，searchTerm + blah + i，searchTerm + blah + i + @ company.com））; } sourceArray（result）; }， dataType：' json' }）; } ko.applyBindings（viewModel）; < / script > < / form > < / body > < / html > 请帮我解决这个问题 提前致谢解决方案 （element）.val（）; var matchingItem = ko.utils.arrayFirst（unwrap（source）， function （item） { return unwrap（inputValueProp？item [inputValueProp]：item）=== currentValue; }）; if （！matchingItem）{ writeValueToModel（ null ） ; } } // 保持自动完成当前响应 var currentResponse = null ; // 处理DO中正在更新的选项，以从源中解除值更新（选项）更新 var mappedSource = ko.dependentObservable（{ read： function （）{ mapped = ko.utils.arrayMap（unwrap（source）， function （item）{ var result = {}; result.label = labelProp？unwrap（item [labelProp]）：unwrap（item）.toString（）; // 在弹出选项中显示 result.value = inputValueProp？unwrap（item [inputValueProp]）：unwrap（ item）.toString（）; // 在输入框中显示 result.actualValue = valueProp？ unwrap（item [valueProp]）：item; // 在模型中存储 return 结果; }）; 返回映射; }，写： function （newValue）{ source（newValue）; // 更新源observableArray，因此我们的映射值（上图）正确 if （currentResponse）{ currentResponse（mappedSource（））; } }， disposeWhenNodeIsRemoved：element }）; if （查询）{ options.source = function （请求，回复）{ currentResponse = response; query.call（ this ，request.term，mappedSource）; } } 其他 { // 每当组成源的项目更新时，请确保自动完成知道它 mappedSource.subscribe（ function （newValue）{ （element）.autocomplete（ option， source，newValue）; }）; options.source = mappedSource（）; } // 初始化自动填充 （元素）.autocomplete（选项）; }， update： function （element，valueAccessor，allBindingsAccessor，viewModel）{ // 基于模型更改的更新值 var allBindings = allBindingsAccessor （）， unwrap = ko.utils.unwrapObservable， modelValue = unwrap（allBindings.jqAutoValue）|| ' '， valueProp = allBindings.jqAutoSourceValue， inputValueProp = allBindings.jqAutoSourceInputValue || valueProp; // 如果我们在输入中写入不同的属性而不是写入如果（valueProp&& inputValueProp！== valueProp）{ var source = unwrap（allBindings.jqAutoSource）|| []; var modelValue = ko.utils.arrayFirst（source， function （item）{ return unwrap（item [valueProp]）=== modelValue; }）|| {}; } // 使用应显示的值更新元素输入 Hi allI am trying to do autocomplete in a textbox using knockout jsI Googled this one and found some good link and tried to implement that one.I tried this LinkThis is showing errorUncaught SyntaxError: Unexpected token ILLEGALMy Code<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head id="head" runat="server"> <title></title> ​<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script></head><body> <form id="form1" runat="server"> <div> <input data-bind="jqAuto: { autoFocus: true }, jqAutoSource: myPeople, jqAutoQuery: getPeople, jqAutoValue: mySelectedGuid, jqAutoSourceLabel: 'displayName', jqAutoSourceInputValue: 'name', jqAutoSourceValue: 'guid'" /> <hr /> <div data-bind="text: mySelectedGuid() ? mySelectedGuid() : 'None selected'"></div> <hr /> For testing setting the model value elsewhere: <select data-bind="options: myPeople, optionsCaption: 'select a person...', optionsText: 'displayName', optionsValue: 'guid', value: mySelectedGuid"></select> <hr /> ​ </div> <script> //jqAuto -- main binding (should contain additional options to pass to autocomplete) //jqAutoSource -- the array to populate with choices (needs to be an observableArray) //jqAutoQuery -- function to return choices //jqAutoValue -- where to write the selected value //jqAutoSourceLabel -- the property that should be displayed in the possible choices //jqAutoSourceInputValue -- the property that should be displayed in the input box //jqAutoSourceValue -- the property to use for the value ko.bindingHandlers.jqAuto = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { var options = valueAccessor() || {}, allBindings = allBindingsAccessor(), unwrap = ko.utils.unwrapObservable, modelValue = allBindings.jqAutoValue, source = allBindings.jqAutoSource, query = allBindings.jqAutoQuery, valueProp = allBindings.jqAutoSourceValue, inputValueProp = allBindings.jqAutoSourceInputValue || valueProp, labelProp = allBindings.jqAutoSourceLabel || inputValueProp; //function that is shared by both select and change event handlers function writeValueToModel(valueToWrite) { if (ko.isWriteableObservable(modelValue)) { modelValue(valueToWrite ); } else { //write to non-observable if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers']['jqAutoValue']) allBindings['_ko_property_writers']['jqAutoValue'](valueToWrite ); } } //on a selection write the proper value to the model options.select = function(event, ui) { writeValueToModel(ui.item ? ui.item.actualValue : null); }; //on a change, make sure that it is a valid value or clear out the model value options.change = function(event, ui) { var currentValue = $(element).val(); var matchingItem = ko.utils.arrayFirst(unwrap(source), function(item) { return unwrap(inputValueProp ? item[inputValueProp] : item) === currentValue; }); if (!matchingItem) { writeValueToModel(null); } } //hold the autocomplete current response var currentResponse = null; //handle the choices being updated in a DO, to decouple value updates from source (options) updates var mappedSource = ko.dependentObservable({ read: function() { mapped = ko.utils.arrayMap(unwrap(source), function(item) { var result = {}; result.label = labelProp ? unwrap(item[labelProp]) : unwrap(item).toString(); //show in pop-up choices result.value = inputValueProp ? unwrap(item[inputValueProp]) : unwrap(item).toString(); //show in input box result.actualValue = valueProp ? unwrap(item[valueProp]) : item; //store in model return result; }); return mapped; }, write: function(newValue) { source(newValue); //update the source observableArray, so our mapped value (above) is correct if (currentResponse) { currentResponse(mappedSource()); } }, disposeWhenNodeIsRemoved: element }); if (query) { options.source = function(request, response) { currentResponse = response; query.call(this, request.term, mappedSource); } } else { //whenever the items that make up the source are updated, make sure that autocomplete knows it mappedSource.subscribe(function(newValue) { $(element).autocomplete("option", "source", newValue); }); options.source = mappedSource(); } //initialize autocomplete $(element).autocomplete(options); }, update: function(element, valueAccessor, allBindingsAccessor, viewModel) { //update value based on a model change var allBindings = allBindingsAccessor(), unwrap = ko.utils.unwrapObservable, modelValue = unwrap(allBindings.jqAutoValue) || '', valueProp = allBindings.jqAutoSourceValue, inputValueProp = allBindings.jqAutoSourceInputValue || valueProp; //if we are writing a different property to the input than we are writing to the model, then locate the object if (valueProp && inputValueProp !== valueProp) { var source = unwrap(allBindings.jqAutoSource) || []; var modelValue = ko.utils.arrayFirst(source, function(item) { return unwrap(item[valueProp]) === modelValue; }) || {}; } //update the element with the value that should be shown in the input $(element).val(modelValue && inputValueProp !== valueProp ? unwrap(modelValue[inputValueProp]) : modelValue.toString()); } }; function Person(guid, name, email) { this.guid = ko.observable(guid); this.name = ko.observable(name); this.email = ko.observable(email); this.displayName = ko.dependentObservable(function() { return this.name() + " [" + this.email() + "]"; }, this); } var viewModel = { myPeople: ko.observableArray(), mySelectedGuid: ko.observable("ec361d63-38ae-4ecc-ab46-6c0ef19ed3ac") }; function getPeople(searchTerm, sourceArray) { $.ajax({ type: 'POST', url: '/echo/json/', data: { json: '{}', delay: .5 }, success: function(data) { //fake response var result = []; for (var i = 0; i < 5; i++) { result.push(new Person("5658ff20-f230-4176-97d1-0ac21abfdbd" + i, searchTerm + "blah" + i, searchTerm + "blah" + i + "@company.com")); } sourceArray(result); }, dataType: 'json' }); } ko.applyBindings(viewModel);​ </script> </form></body></html>Please help me to solve this problemThanks in advance 解决方案 (element).val(); var matchingItem = ko.utils.arrayFirst(unwrap(source), function(item) { return unwrap(inputValueProp ? item[inputValueProp] : item) === currentValue; }); if (!matchingItem) { writeValueToModel(null); } } //hold the autocomplete current response var currentResponse = null; //handle the choices being updated in a DO, to decouple value updates from source (options) updates var mappedSource = ko.dependentObservable({ read: function() { mapped = ko.utils.arrayMap(unwrap(source), function(item) { var result = {}; result.label = labelProp ? unwrap(item[labelProp]) : unwrap(item).toString(); //show in pop-up choices result.value = inputValueProp ? unwrap(item[inputValueProp]) : unwrap(item).toString(); //show in input box result.actualValue = valueProp ? unwrap(item[valueProp]) : item; //store in model return result; }); return mapped; }, write: function(newValue) { source(newValue); //update the source observableArray, so our mapped value (above) is correct if (currentResponse) { currentResponse(mappedSource()); } }, disposeWhenNodeIsRemoved: element }); if (query) { options.source = function(request, response) { currentResponse = response; query.call(this, request.term, mappedSource); } } else { //whenever the items that make up the source are updated, make sure that autocomplete knows it mappedSource.subscribe(function(newValue) {(element).autocomplete("option", "source", newValue); }); options.source = mappedSource(); } //initialize autocomplete(element).autocomplete(options); }, update: function(element, valueAccessor, allBindingsAccessor, viewModel) { //update value based on a model change var allBindings = allBindingsAccessor(), unwrap = ko.utils.unwrapObservable, modelValue = unwrap(allBindings.jqAutoValue) || '', valueProp = allBindings.jqAutoSourceValue, inputValueProp = allBindings.jqAutoSourceInputValue || valueProp; //if we are writing a different property to the input than we are writing to the model, then locate the object if (valueProp && inputValueProp !== valueProp) { var source = unwrap(allBindings.jqAutoSource) || []; var modelValue = ko.utils.arrayFirst(source, function(item) { return unwrap(item[valueProp]) === modelValue; }) || {}; } //update the element with the value that should be shown in the input 这篇关于如何使用knockout js执行AutoComplete的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！