AutoComplete控制錯誤：url.indexOf不是函數

Question

我正在開發ASP.NET MVC3中的網站。

實際上，我試圖實現一個自動完成控制......實際上，當一個用戶輸入兩個以上的字母時，我想顯示這兩個字母對應的用戶列表。

兩個星期前，我已經成功做到這一點，這裏的結果：

下面的代碼：

ReservationCalendar.cs

//AutoComplete control that return the name and first name of the partner corresponding to "term" 
    public ActionResult Name(string term) 
    { 
     int id = 0; 
     var user = User.Identity.Name; 
     int inter = int.Parse(user); 
     var managers = from d in db.Managers 
         select d; 
     managers = managers.Where(s => s.AffiliationNumber == inter); 
     foreach (var manager in managers) 
     { 
      id = manager.TennisClubID; 
     } 

     var customers = (from c in db.Customers where (c.Name.Contains(term)) && c.TennisClub.ID == id select c.Name + ";" + c.FirstName).Distinct().Take(10); 
     return Json(customers, JsonRequestBehavior.AllowGet); 
    } 

Create.cshtml

@model TennisOnline.Models.Reservation 

@{ 
ViewBag.Title = "Create"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 


<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"> </script> 
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script> 
<link href="@Url.Content("~/Content/jquery.autocomplete.css")" rel="stylesheet" type="text/css"/> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#Partner").autocomplete({ source: '@Url.Action("Name", "ReservationCalendar")' }, { minChars: 2 }); 
}); 
</script> 

@using (Html.BeginForm()) { 
@Html.ValidationSummary(true) 
<fieldset> 
    <legend>Reservation</legend> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Date) 
    </div> 
    <div class="editor-field"> 
     @Html.DisplayFor(model => model.Date) 
     @Html.ValidationMessageFor(model => model.Date) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.StartTime) 
    </div> 
    <div class="editor-field"> 
     @Html.DisplayFor(model => model.StartTime) 
     @Html.ValidationMessageFor(model => model.StartTime) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Double) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Double) 
     @Html.ValidationMessageFor(model => model.Double) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Customer.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.DisplayFor(model => model.Customer.Name) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Partner) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Partner) 
     @Html.ValidationMessageFor(model => model.Partner) 
    </div> 

    <div class="editor-label"> 
     @Html.Label("Numéro du court") 
    </div> 
    <div class="editor-field"> 
     @Html.DisplayFor(model => model.TennisCourt.Number) 
     @Html.ValidationMessageFor(model => model.TennisCourt.Number) 
    </div> 


    <p> 
     <input type="submit" value="Créer" /> 
    </p> 
</fieldset> 
} 

<div> 
@Html.ActionLink("Retour à l'index", "Index", new { id = Model.TennisClub.ID }) 
</div> 

JQuery.AutoComplete.js

(function($) { 
"use strict"; 

/** 
* jQuery autocomplete plugin 
* @param {object|string} options 
* @returns (object} jQuery object 
*/ 
$.fn.autocomplete = function(options) { 
    var url; 
    if (arguments.length > 1) { 
     url = options; 
     options = arguments[1]; 
     options.url = url; 
    } else if (typeof options === 'string') { 
     url = options; 
     options = { url: url }; 
    } 
    var opts = $.extend({ }, $.fn.autocomplete.defaults, options); 
    return this.each(function() { 
     var $this = $(this); 
     $this.data('autocompleter', new $.Autocompleter(
      $this, 
      $.meta ? $.extend({ }, opts, $this.data()) : opts 
     )); 
    }); 
}; 

/** 
* Store default options 
* @type {object} 
*/ 
$.fn.autocomplete.defaults = { 
    inputClass: 'acInput', 
    loadingClass: 'acLoading', 
    resultsClass: 'acResults', 
    selectClass: 'acSelect', 
    queryParamName: 'q', 
    limitParamName: 'limit', 
    extraParams: { }, 
    remoteDataType: false, 
    lineSeparator: '\n', 
    cellSeparator: '|', 
    minChars: 2, 
    maxItemsToShow: 10, 
    delay: 400, 
    useCache: true, 
    maxCacheLength: 10, 
    matchSubset: true, 
    matchCase: false, 
    matchInside: true, 
    mustMatch: false, 
    selectFirst: false, 
    selectOnly: false, 
    showResult: null, 
    preventDefaultReturn: true, 
    preventDefaultTab: false, 
    autoFill: false, 
    filterResults: true, 
    sortResults: true, 
    sortFunction: null, 
    onItemSelect: null, 
    onNoMatch: null, 
    onFinish: null, 
    matchStringConverter: null, 
    beforeUseConverter: null, 
    autoWidth: 'min-width', 
    useDelimiter: false, 
    delimiterChar: ',', 
    delimiterKeyCode: 188, 
    processData: null 
}; 

/** 
* Sanitize result 
* @param {Object} result 
* @returns {Object} object with members value (String) and data (Object) 
* @private 
*/ 
var sanitizeResult = function(result) { 
    var value, data; 
    var type = typeof result; 
    if (type === 'string') { 
     value = result; 
     data = { }; 
    } else if ($.isArray(result)) { 
     value = result[0]; 
     data = result.slice(1); 
    } else if (type === 'object') { 
     value = result.value; 
     data = result.data; 
    } 
    value = String(value); 
    if (typeof data !== 'object') { 
     data = { }; 
    } 
    return { 
     value: value, 
     data: data 
    }; 
}; 

/** 
* Sanitize integer 
* @param {mixed} value 
* @param {Object} options 
* @returns {Number} integer 
* @private 
*/ 
var sanitizeInteger = function(value, stdValue, options) { 
    var num = parseInt(value, 10); 
    options = options || { }; 
    if (isNaN(num) || (options.min && num < options.min)) { 
     num = stdValue; 
    } 
    return num; 
}; 

/** 
* Create partial url for a name/value pair 
*/ 
var makeUrlParam = function(name, value) { 
    return [name, encodeURIComponent(value)].join('='); 
}; 

/** 
* Build an url 
* @param {string} url Base url 
* @param {object} [params] Dictionary of parameters 
*/ 
var makeUrl = function(url, params) { 
    var urlAppend = []; 
    $.each(params, function(index, value) { 
     urlAppend.push(makeUrlParam(index, value)); 
    }); 
    if (urlAppend.length) { 
     url += url.indexOf('?') === -1 ? '?' : '&'; // ERROR HERE !!! 
     url += urlAppend.join('&'); 
    } 
    return url; 
}; 

    .... 

})(jQuery); 

奇怪的是，當我想在我的 「ReservationCalendar.cs」 幾乎可以使用 「相同」 的代碼，我在Firebug中得到這個JS錯誤：url.indexOf不是一個函數... 在我的js.file所以

而且他從未達到我的控制器的方法「名稱「...

你能幫我找到我做錯了嗎？在此先感謝

Answer 1

在某些瀏覽器，沒有indexOf函數（如IE8），所以你需要添加它在原型。 事情是這樣的：

if (!Array.prototype.indexOf) 
{ 
    Array.prototype.indexOf = function(elt /*, from*/) 
    { 
    var len = this.length >>> 0; 

    var from = Number(arguments[1]) || 0; 
    from = (from < 0) 
     ? Math.ceil(from) 
     : Math.floor(from); 
    if (from < 0) 
     from += len; 

    for (; from < len; from++) 
    { 
     if (from in this && 
      this[from] === elt) 
     return from; 
    } 
    return -1; 
    }; 
}